一.使用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>
小辣鸡