html 使用vue展示动画
一、简介
二、代码内容
三、问题
一、简介
因为帮人做一个静态页面,使用了vue来处理。
二、代码内容
1. 初始化页面内容。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>认识</title> <script src="./vue.js"></script> </head> <body> <div id="app"> </div> </body> <script> new Vue({ el: "#app", data: {}, methods:{} }) </script> </html>
2.再vue使用动画,方法
在body里面添加 transition name
<transition name="start"> <div class="start-img-box" v-show="start_show"> </div> </transition>
在css 里面代码
.start-enter-active { animation: demo 1s; } .start-leave-active { animation: demo linear 1s reverse; } @keyframes demo { /* 从左边而来 */ from { transform: translateX(-100%); } /* 回到左边原点 */ to { transform: translateX(0px); } }
最后在js里调用就可以使用动画
start_show_fc(){ const that = this; that.start_show = true; },
如果是列表,就需要使用transition-group
<transition-group name="start"> <div v-for="(item, key) in show_list" :key="key"> </div> </transition-group>
2. button 给按钮添加背景。
.deal-button{ background-image: url("https://yny-1300951025.cos.ap-chengdu.myqcloud.com/TravelGuideImg/start2.png"); background-color: rgba(0, 0, 0, 0); background-size: 100% 100%; background-size: cover; box-sizing: border-box; padding: 0; border: none; width: 17%; height: 100%; }
3. input 去掉边框。
input { border: 0; // 去除未选中状态边框 outline: none; // 去除选中状态边框 background-color: rgba(0, 0, 0, 0);// 透明背景 }
4.vue 控制视频
<video :src="video_url" controls="controls" style="width:100%;height:100%;" ref="vueMiniPlayer"></video>
js 控制
this.$refs.vueMiniPlayer.paused; //true false this.$refs.vueMiniPlayer.pause();//暂停 this.$refs.vueMiniPlayer.play();//播放
三、问题