Vue中的动画
2018-09-26 本文已影响1人
追逐_chase
Vue.jpeg
Vue动画
image.png
过度类名
v-enter 进入之前的起始状态 还没有进入
v-enter-active 入场动画的时间段
v-enter-to
v-leave
v-leave-active 离场动画的时间段
v-leave-to 动画离开之后的终止状态，此时，元素 动画已经结束了
<!--2.自定义样式-->
<style>
.v-enter,
.v-leave-to{
opacity: 0;
transform: translateX(150px);
}
.v-enter-active,
.v-leave-active{
transition: all 0.5s ease;
}
</style>
<div id="app">
<button @click="show = !show">显示隐藏</button>
<!--1.transition，把需要被动画控制的元素，包括起来，是官方提供的-->
<transition>
<h3 v-if="show">hello</h3>
</transition>
</div>
<script>
new Vue({
el:"#app",
data:{
show:false
}
})
</script>
定义不同的名称动画
<style>
.cc-enter,
.cc-leave-to{
opacity: 0;
transform: translateX(150px);
}
.cc-enter-active,
.cc-leave-active{
transition: all 0.5s ease;
}
</style>
<div id="app">
<input type="button" value="点击" @click="falg = !falg">
<!--添加 自己定义的 过度的类名-->
<transition name="cc">
<h3 v-if="falg">这是一个H3</h3>
</transition>
</div>
<script>
new Vue({
el:"#app",
data:{
falg:false
},
methods:{}
});
第三方动画库Animate.css和Vue的结合使用
enter-class
enter-active-class 进入时刻的动画
enter-to-class
leave-class
leave-active-class 离场动画的时间段
leave-to-class
//导入包
<script src="node_modules/vue/dist/vue.js"></script>
<link rel="stylesheet" href="lib/animate.css">
//html
<div id="app">
<input type="button" value="第三方动画和Vue动画结合使用" @click="flag = !flag">
<!--入场rubberBand 离场 tada -->
<!--<transition enter-active-class="animated rubberBand" leave-active-class="animated tada" >-->
<!--<h1 v-if="flag">这是一个H1的标签</h1>-->
<!--</transition>-->
<!--animation 分离到 子元素 添加动画持续时间-->
<!--<transition enter-active-class="rubberBand" leave-active-class="tada" :duration="400">-->
<!--<h1 v-if="flag" class="animated">这是一个H1的标签</h1>-->
<!--</transition>-->
<!-- 指定分别的 持续时间 duration 传入对象 指定不同时间的 持续时间-->
<transition enter-active-class="rubberBand" leave-active-class="tada" :duration="{enter:400,leave:600}">
<h1 v-if="flag" class="animated">这是一个H1的标签</h1>
</transition>
</div>
<script>
new Vue({
el:"#app",
data:{
flag:false
},
methods:{ }
})
</script>
动画的周期函数[钩子函数]
<transition
v-on:before-enter="beforeEnter"
v-on:enter="enter"
v-on:after-enter="afterEnter"
v-on:enter-cancelled="enterCancelled"
v-on:before-leave="beforeLeave"
v-on:leave="leave"
v-on:after-leave="afterLeave"
v-on:leave-cancelled="leaveCancelled"
>
<!-- ... -->
</transition>
上面的方法可以在 Vue实例中的methods方法中实现
<script src="node_modules/vue/dist/vue.js"></script>
<style>
.ball{
height: 15px;
width: 15px;
background: red;
border-radius: 50%;
}
</style>
<div id="app">
<input type="button" value="加入购物车" @click="flag = !flag">
//方法
<transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter">
<div class="ball" v-show="flag"> </div>
</transition>
</div>
<script>
//实现
new Vue({
el:"#app",
data:{
flag:false
},
methods:{
// el表示要执行的动画原生的DOM对象
beforeEnter:function (el) {
// 动画入场之前，这个动画还没有开始，可以在这个函数中 设置元素的样式
el.style.transform = "translate(0,0)";
},
enter:function (el,done) {
//动画入场 表示动画 开始之后的样式 可以设置动画的结束状态
el.offsetWidth; //强制动画的刷新
el.style.transform = "translate(150px,450px)";
el.style.transition = "all 1s ease";
//其实这个函数就是afterEnter的引用，就是一个函数
done();
console.log(done);
},
afterEnter:function (el) {
//在执行这个函数之前 必须在enter方法中 调用 回调完成的函数 done
console.log("看看");
this.flag = !this.flag;
//回复原来的位置
// el.style.transform = "translate(0,0)";
}
}
})
列表动画
- 我们在使用列表做过度动画时候，如果需要过度元素，是通过
v-for 循环渲染出来的，不能使用transition包裹,需要使用<transition-group>
-
v-move这个属性是在元素改变定位的过程中使用，所以需要使用.v-leave-active{position: absolute;}配合使用 -
appear应用在transition-group时 来实现入场的效果
-tag 属性 指明transition-group要渲染什么元素，
<transition-group tag="ul"></transition-group>
渲染成为ul元素，如果没有指明 默认是span元素
//样式
<script src="node_modules/vue/dist/vue.js"></script>
<style>
li {
border: 1px dashed #ccc;
padding-left: 5px;
margin-top: 5px;
width: 100%;
}
li:hover{
background: #2AB561;
}
.v-enter,
.v-leave-to{
opacity: 0;
transform: translateX(80px);
}
.v-enter-active,
.v-leave-active{
transition: all 1s ease;
}
/*v-move它会在元素的改变定位的过程中应用 要和v-leave-active 配合使用 */
.v-move {
transition: all 1s ease;
}
.v-leave-active{
position: absolute;
}
</style>
//HTML
<div id="app">
<label>
id:
<input type="text" v-model="id" >
</label>
<label>
name
<input type="text" v-model="name">
</label>
<input type="button" value="添加" @click="add">
<ul >
<!--使用appear属性 界面入场时的效果-->
<transition-group appear>
<li v-for="(item, index) in list" :key="item.id" @click="remove(index)">
{{item.id}} ---- {{item.name}}
</li>
</transition-group>
</ul>
</div>
//
<script>
new Vue({
el:"#app",
data:{
id:"",
name:"",
list:[
{id:1,name:"CC",age:15},
{id:2,name:"sumer",age:18},
{id:3,name:"TT",age:16}
]
},
methods:{
add:function () {
this.list.push({id:this.id,name:this.name});
this.id = this.name = "";
},
remove:function (index) {
this.list.splice(index,1);
}
}
})
</script>
image.gif
喜欢文章的👍一下，谢谢，有想学习[web]可以私聊我。
image.png
