html 使用vue展示动画-526互联

一、简介

二、代码内容

三、问题

一、简介

　　因为帮人做一个静态页面，使用了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();//播放

三、问题