Vue中CSS动画原理的实现
需积分: 0 121 浏览量
2020-10-17
10:31:06
上传
评论
收藏 62KB PDF 举报
Vue中中CSS动画原理的实现动画原理的实现
主要介绍了Vue中CSS动画原理的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
下面这段代码，是点击按钮实现hello world显示与隐藏
<div id="root">
<div v-if="show">hello world</div>
<button @click="handleClick">按钮</button>
</div>
let vm = new Vue({
el: '#root',
data: {
show:true
},
methods: {
handleClick(){
this.show = !this.show
}
}
})
此时有一个需求，希望是在显示与隐藏时，能实现渐隐渐现的动画效果。
<div id="root">
<transition name="fade">
<div v-if="show">hello world</div>
</transition>
<button @click="handleClick">按钮</button>
</div>
let vm = new Vue({
el: '#root',
data: {
show:true
},
methods: {
handleClick(){
this.show = !this.show
}
}
})
如果希望hello world有一个动画效果的话，需要在外面套一层transition标签，意思它包裹的内容，有一个动画效果，可以给它一个名字name="fade"。
enter
当一个元素被transition标签包裹之后，Vue 会自动的分析元素的css样式，然后构建动画流程
在动画还没有执行的一瞬间，Vue 会帮我们在dom标签上添加两个class，分别是fade-enter、fade-enter-active。
当动画第一帧执行结束之后，transition这个标签分析过，里面有一个动画效果，Vue 会在动画运行到第二帧的时候，会将dom标签上v-enter的class删除，再添加一个v-enter-to的class。
接着动画会继续执行，执行到结束的一瞬间，Vue 会干一件事，它会把之前添加的v-enter-to和v-enter-active都删除，
.fade-enter{
opacity: 0;
}
.fade-enter-active{
transition: opacity 3s;
}
<div id="root">
<transition name="fade">
<div v-if="show">hello world</div>
</transition>
<button @click="handleClick">按钮</button>
</div>
let vm = new Vue({
el: '#root',
data: {
show:true
},
methods: {
handleClick(){
this.show = !this.show
}
}
})
我们只需要在css中给fade-enter和fade-enter-active分别写上样式就行了。这里要注意的是 Vue 中默认以v开头，如：v-enter，transition加个name属性，就可以用name属性值做开头，如：fade-enter。
评论0
最新资源