一.使用vue的transition标签结合css样式完成动画
如果要使用动画效果:
第一种方式是使用transition标签加css样式结合完成:
1.给需要运动的元素加入transition标签
2.默认情况下如果控制了transition标签元素的显示和隐藏它会默认
给这个元素加入一些class
隐藏: 加入类名:

v-leave  
v-leave-active 
v-leave-to

显示: 加入类名:

v-enter  准备进行运动的状态(起始状态)                     
v-enter-active  整个运动状态
v-enter-to  整个运动状态(强调运动的结果,结束状态)

<body>
<div id="app">
    <a @click="flag='one'">B</a>||<a @click="flag='two'">A</a>
    <hr>
    <transition mode="out-in">
        <div :is="flag">
            <one></one>
        </div>
    </transition>
</div>
</body>
</html>
<script src="bower_components/vue/dist/vue.js"></script>
<script>
(function (){
    let one ={
        template:"<div style='width: 300px;height: 300px;background-color: red'></div>"
    };
    let two ={
        template:"<div style='width: 300px;height: 300px;background-color: yellow'></div>"
    };
    new Vue({
        el:"#app",
        data:{
            flag:"one"
        },
        components:{
            one,two
        }
    })
})();
</script>

二.利用animate.css结合transition实现动画

<body>
<div id="app">
<a @click="flag='one'">B</a>||<a @click="flag='two'">A</a>
<hr>
<transition enter-active-class="animated bounceIn" leave-active-class="animated bounceOut" mode="Out- 
 in">
    <div :is="flag">
        <one></one>
    </div>
</transition>
</div>
</body>
</html>
<script src="bower_components/vue/dist/vue.js"></script>
<script>
(function (){
    let one ={
        template:"<div style='width: 300px;height: 300px;background-color: red'></div>"
    };
    let two ={
        template:"<div style='width: 300px;height: 300px;background-color: yellow'></div>"
    };
    new Vue({
        el:"#app",
        data:{
            flag:"one"
        },
        components:{
            one,two
        }
    })
})();
</script>

  <style>
  @keyframes swiperLeft {
    from{
       opcity:0;
       transform: translate(-300px,0);
   }
   to{
       opacity: 1;
       transform: translate(0,0);
   }
}
@keyframes swiperRight {
   from{
       opcity:1;
       transform: translate(0px,0);
   }
   to{
       opacity:0;
       transform: translate(-300px,0);
   }
}
 .v-enter-active{
    animation:swiperLeft 1s;
 }
.v-leave-active{
   animation:swiperRight 1s;
}
</style>
<body>
<div id="app">
<a @click="flag='one'">B</a>||<a @click="flag='two'">A</a>
<hr>
<transition mode="out-in">
    <div :is="flag">
        <one></one>
    </div>
</transition>
</div>
</body>
</html>
<script src="bower_components/vue/dist/vue.js"></script>
<script>
(function (){
    let one ={
        template:"<div style='width: 300px;height: 300px;background-color: red'></div>"
    };
    let two ={
        template:"<div style='width: 300px;height: 300px;background-color: yellow'></div>"
    };
    new Vue({
        el:"#app",
        data:{
            flag:"one"
        },
        components:{
            one,two
        }
    })
})();
</script>
Last modification:October 30th, 2019 at 08:32 am
来杯coffee吧