请问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>点击查看剩余70%
by thinkfuture
我知道答案，我要回答
私活外包
