请问vue中过渡动画有几种实现方式？
网友回复
有三种：
一、.使用vue的transition标签结合css样式完成动画，代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.show-enter-active,.show-leave-active{
transition:all 2s;
}
.show-enter,.show-leave-to{
margin-left: 100px;
}
.show-enter-to,.show-leave{
margin-left:0px;
}
</style>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vue@2.6.1-dev.js"></script>
</head>
<body>
<!-- 定义一个vue的管理区块，（MVVM中的View） -->
<!--
如果要使用动画效果:
第一种方式是使用transition标签加css样式结合完成：
1.给需要运动的元素加入transition标签
2.默认情况下如果控制了transition标签元素的显示和隐藏它会默认
给这个元素加入一些class
隐藏: 加入类名:
v-leave
v-leave-active
v-leave-to
显示: 加入类名:
v-enter 准备进行运动的状态(起始状态)
v-enter-active 整个运动状态
v-enter-to 整个运动状态(强调运动的结果，结束状态)
3.将来如果给transition设置一个name为“show”以后,将来所有的类的名称都需要改变，默认前缀为v-
如果加入了name属性，需要将v- 改为show-
-->
<div id="app">
<button @click="toggle">显示/隐藏</button><br>
<!-- <transition > -->
<transition name="show">
<span class="show" v-show="isshow">bfw</span>
</transition>
</div>
<script>
// 实例化vue对象（MVVM中的View Model）
new Vue({
// vm控制的区块为id为app的div，此div中的所有vue指令均可以被vm解析
el:'#app',
data:{
// 数据 （MVVM中的Model）
isshow:false
},
methods:{
toggle:function(){
this.isshow = !this.isshow;
}
}
})
</script>
</body>
</html>二、利用animate.css结合transition实现动画，代码如下：<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/animate.css">
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vue@2.6.1-dev.js"></script>
</head>
<body>
<!-- 定义一个vue的管理区块，（MVVM中的View） -->
<div id="app">
<button @click="toggle">显示/隐藏</button><br>
<transition
enter-active-class="animated fadeInRight"
leave-active-class="animated fadeOutRight"
>
<!-- 坑：span行内元素（行内元素没有宽）
应该改为块级元素
-->
<div style="width:200px" class="show" v-show="isshow">bfw</div>
</transition>
</div>
</body>
<script>
// 实例化vue对象（MVVM中的View Model）
new Vue({
// vm控制的区块为id为app的div，此div中的所有vue指令均可以被vm解析
el:'#app',
data:{
// 数据 （MVVM中的Model）
isshow:false
},
methods:{
toggle:function() {
this.isshow = !this.isshow;
}
}
})
</script>
</html>三、利用 vue中的钩子函数实现动画，代码如下：<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.show {
transition: all 0.5s;
}
</style>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vue@2.6.1-dev.js"></script>
</head>
<body>
<!-- 定义一个vue的管理区块，（MVVM中的View） -->
<div id="app">
<button @click="toggle">显示/隐藏</button><br>
<transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter">
<div class="show" v-show="isshow">bfw</div>
</transition>
</div>
<script>
// 实例化vue对象（MVVM中的View Model）
new Vue({
// vm控制的区块为id为app的div，此div中的所有vue指令均可以被vm解析
el: '#app',
data: {
// 数据 （MVVM中的Model）
isshow: false
},
methods: {
toggle: function () {
this.isshow = !this.isshow;
},
// 以下三个与enter相关的方法只会在元素由隐藏变为显示的时候才会执行
// el:指的是当前调用这个方法的元素对象
// done:用来决定是否要执行后续的代码如果不执行这个方法，那么将来执行完before执行完enter以后动画就会停止
beforeEnter: function (el) {
console.log("beforeEnter");
// 当入场之前会执行 v-enter
el.style = "padding-left:100px";
},
enter: function (el, done) {
// 当进行的过程中每执行 v-enter-active
console.log("enter");
// 为了能让代码正常进行，在设置了结束状态后必须调用一下这个元素的
// offsetHeight / offsetWeight 只是为了让动画执行
el.offsetHeight;
// 结束的状态最后啊写在enter中
el.style = "padding-left:0px";
// 执行done继续向下执行
done();
},
afterEnter: function (el) {
// 当执行完毕以后会执行
console.log("afterEnter");
this.isshow = false;
}
}
})
</script>
</body>
</html>
by thinkfuture
我知道答案，我要回答
私活外包
最新提问
