(1)使用过渡名实现动画(手写及自定义)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.v-enter,
.v-leave-to{
opacity: 0;
transform: translateX(150px);
}
.v-enter-active,
.v-leave-avtive{
transition: all 0.8s ease;
}
.my-enter,
.my-leave-to{
opacity: 0;
transform: translateY(150px);
}
.my-enter-active,
.my-leave-avtive{
transition: all 0.8s ease;
}
</style>
</head>
<body>
<div id="app">
<input type="button" value="切换1" @click="flag=!flag">
<transition>
<h3 v-if="flag">这是一个标签</h3>
</transition>
<hr>
<input type="button" value="切换2" @click="flag2 =! flag2">
<transition name="my">
<h3 v-if="flag2">这是一个标签</h3>
</transition>
</div>
<script src="../vue-dev/vue-dev/dist/vue.min.js"></script>
<!--<script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>-->
<script>
var vm = new Vue({
el:"#app",
data: {
flag:false,
flag2:false
},
methods:{
}
})
</script>
</body>
</html>
(2)使用第三方animate.css库实现动画(入场离场)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="animate.min.css">
<style>
</style>
</head>
<body>
<div id="app">
<input type="button" value="切换1" @click="flag=!flag">
<transition enter-active-class=" bounceIn"
leave-active-class=" bounceOut"
:duration="{enter:800,leave:200}">
<h3 v-if="flag" class="animated">这是一个标签</h3>
</transition>
</div>
<script src="../vue-dev/vue-dev/dist/vue.min.js"></script>
<!--<script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>-->
<script>
var vm = new Vue({
el:"#app",
data: {
flag:false,
},
methods:{
}
})
</script>
</body>
</html>
(3)钩子函数实现半场动画[加入购物车的效果]
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="animate.min.css"> <style> #ball { width: 15px; height: 15px; border-radius: 50%; background-color: red; } </style> </head> <body> <div id="app"> <input type="button" value="加入购物车" @click="flag = !flag"> <transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter" > <div id="ball" v-if="flag"></div> </transition> </div> <script src="../vue-dev/vue-dev/dist/vue.min.js"></script> <!--<script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>--> <script> var vm = new Vue({ el:"#app", data: { flag:false, }, methods:{ beforeEnter(el){ el.style.transform = "translate(0,0)" // 设置小球开始动画之前的起始位置 }, enter(el,done){ el.offsetWidth; // 这句话没有实际的作用,但是如果不写,没有动画效果;可以认为这句话是强制动画刷新 el.style.transform = "translate(150px,450px)"; // 移动到规定位置 el.style.transition = "all 1s ease"; // 过渡效果 done() // 不写的话会出现一些延迟类的问题;done是afterenter函数的引用 }, afterEnter(el){ // 动画完成之后会调用这个函数 this.flag = ! this.flag } } }) </script> </body> </html>