Vue中使用 transition标签或transition-group标签以及第三方类实现动画
Vue公司的动画并没有非常炫酷的效果，不过也是有一些实用性的，在项目中有的地方使用，也是能够营造出不同的效果下面为大家列举两个简单实现动画的例子使用<transition>包裹<!DOCTYPE html><html lang=&qu
·
Vue的动画并没有非常炫酷的效果，不过也是有一些实用性的，在项目中有的地方使用，也是能够营造出不同的效果
下面为大家列举两个简单实现动画的例子
使用 <transition> 包裹
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script rel="script" src="js/vue-2.4.0.js"></script>
<!--2. 自定义两组样式，来控制transition 内部的元素实现动画-->
<style>
/*v-enter 是进入之前，元素的起始状态*/
/*v-leave-to 离开之后动画的终止状态*/
.v-enter,.v-leave-to{
opacity: 0;/*透明度*/
transform: translateX(150px);
}
/*入场(离场)动画的时间段 */
.v-enter-active,.v-leave-active{
transition: all 0.8s ease;
}
.my-enter,.my-leave-to{
opacity: 0;/*透明度*/
transform: translateY(70px);
}
.my-enter-active,.my-leave-active{
transition: all 0.8s ease;
}
</style>
</head>
<body>
<div id="app">
<input type="button" value="toggle" @click="flag=!flag">
<input type="button" value="toggle2" @click="flag2=!flag2">
<!--1. 使用transition元素把需要被动画控制的元素，包裹起来-->
<transition>
<h3 v-if="flag">这是一个H3</h3>
</transition>
<transition name="my"> <!--区分不同组织间动画-->
<h6 v-if="flag2">这是一个H6</h6>
</transition>
</div>
<script>
var vm = new Vue({
el : '#app',
data : {
flag : false,
flag2 : false,
},
methods : {
},
});
</script>
</body>
</html>使用 <transition-group> 包裹
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script rel="script" src="js/vue-2.4.0.js"></script>
<link rel="stylesheet" href="css/animate.css">
<style>
li{
border: 1px dashed #999;
margin: 5px;
line-height: 35px;
font-size: 14px;
padding-left: 5px;
width: 100%;
}
li:hover{
background-color: hotpink;
transition: all 0.5s ease;
}
.v-enter,.v-leave-to{
opacity: 0;
transform: translateY(80px);
}
.v-enter-active,.v-leave-active{
transition: all 0.6s ease;
}
/*v-move 和 v-leave-active 配合使用，能够实现列表后续的元素，渐渐地漂上来的效果 */
.v-move{
transition: all 0.6s ease;
}
.v-leave-active{
position: absolute;
}
</style>
</head>
<body>
<div id="app">
<div>
<label>
ID:
<input type="text" v-model="id">
</label>
<label>
Name:
<input type="text" v-model="name">
</label>
<input type="button" value="添加" @click="add">
</div>
<ul>
<!--在实现列表过渡时，如果需要过渡的元素是通过v-for渲染出来的，不能使用
transition 包裹，需要使用 transition-group -->
<!--若需要为 v-for 循环创建的元素设置动画，必须为每一个元素设置 :key 属性-->
<transition-group>
<li v-for="(item,i) in list" :key="item.id" @click="del(i)">
{{ item.id }} --- {{ item.name }}
</li>
</transition-group>
</ul>
</div>
<script>
var vm = new Vue({
el : '#app',
data : {
id:'',
name :'',
list : [
{id:1,name:'赵高'},
{id:2,name:'秦桧'},
{id:3,name:'严嵩'},
{id:4,name:'魏忠贤'},
],
},
methods : {
add(){
this.list.push({ id :this.id,name : this.name});
this.id = this.name = '';
},
del(i){
this.list.splice(i,1);
},
}
});
</script>
</body>
</html>使用 第三方类实现动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script rel="script" src="js/vue-2.4.0.js"></script>
<link rel="stylesheet" href="css/animate.css">
<!--入场 bounceIn 离场 ounceOut-->
</head>
<body>b
<div id="app">
<input type="button" value="toggle" @click="flag=!flag">
<!--<transition enter-active-class="animated bounceIn"
leave-active-class="animated bounceOut">
<h3 v-if="flag">坏蛋，坏蛋，大坏蛋~~~</h3>
</transition>-->
<!--<transition enter-active-class="bounceIn"
leave-active-class="bounceOut" :duration="200">
//:duration="毫秒值" 统一设置入场和离场时间为 400ms
<h3 v-if="flag" class="animated">坏蛋，坏蛋，大坏蛋~~~</h3>
</transition>-->
<transition enter-active-class="bounceIn"
leave-active-class="bounceOut"
:duration="{ enter: 200, leave: 2000 }"><!--分别设置时间-->
<h3 v-if="flag" class="animated">坏蛋，坏蛋，大坏蛋~~~</h3>
</transition>
</div>
<script>
var vm = new Vue({
el : '#app',
data : {
flag : false,
},
methods : {
},
});
</script>
</body>
</html>不过这样使用的话，会有一些瑕疵，运行检查代码
大家可以看到 ul>span标签里 放的是块级 li元素 ，这是不符合标准的，所以应修改代码如下：
<!-- 【appear】 给 transition-group 添加入场效果-->
<!--
通过 tag 属性，指定transition-group 渲染 为指定的元素
若不指定，则默认为渲染为 span 标签
-->
<transition-group appear tag="ul">
<li v-for="(item,i) in list" :key="item.id" @click="del(i)">
{{ item.id }} --- {{ item.name }}
</li>
</transition-group>代码运行如下：
这样就OK啦~~
前往低代码交流专区
更多推荐
27
0- 0
已为社区贡献8条内容
所有评论(0)