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
。
现在这里两个class
的意思是:
动画还没执行时,就已经有fade-enter
,fade-enter-active
,动画第一帧运行时fade-enter
就会被移除,css
效果opacity: 0
就会变成opacity: 1
,直到动画执行完fade-enter-active
才会被移除,这期间它用transition
对opacity
进行监控,需要3s
才能完成。
leave
隐藏的动画流程:
隐藏的第一个瞬间时,Vue 会在dom
上添加两个class
,分别是v-leave
和v-leave-active
运行到第二帧时,Vue 会将v-leave
移除,再添加一个v-leave-to
接着动画会继续执行,执行到结束的一瞬间,Vue 会把之前添加的v-leave-to
和v-leave-active
都删除。
.fade-leave-to{opacity: 0;
}
.fade-leave-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-leave-active
这个class
都存在。也就是在动画运行过程中,我要时刻监听div
的opacity
,一旦opacity
发生变化,我要让让他在3s
内执行完毕。
在第一个瞬间fade-leave
的opacity
为1
,就是显示状态;第二个瞬间opacity
为0
了,此时要给它添加一个fade-leave-to
的class
,而fade-leave-active
一直在监听opacity
的变化,一旦opacity
发生变化,会让它在3s
内完成
自定义class
如果我不想用 Vue 提供的这六个class
,我想自定义一个class
,该怎么实现呢?
.active,.leave{transition: opacity 3s;
}
Vue 给我们提供了一个自定义的属性的方法,使用enter-active-class
就能自定义一个enter
类;使用leave-active-class
就用自定义一个leave
类。
<transition name="fade" enter-active-class="active"leave-active-class="leave"<div v-if="show">hello world</div>
</transition>
利用这个特性,在项目中需使用复杂的css
样式时,就可以引入第三方css
样式库,这里介绍一个animate.css
的库。
使用第三方库(animate.css
),需要注意两点:
- 必须使用自定义
class
的方式 - 自定义
class
中必须有一个animated
的class
<transition name="fade" enter-active-class="animated swing"leave-active-class="animated shake"<div v-if="show">hello world</div>
</transition>
上面是按钮点击了才会出现动画效果,但此时需求想要实现一入场就有动画效果该怎么实现呢?
<transition name="fade" appear // 加上 appear 属性enter-active-class="animated swing"leave-active-class="animated shake"appear-active-class="animated swing" //使用自定义属性 appear-active-class 就可以实现<div v-if="show">hello world</div>
</transition>
如需要在一进入就有动画,需要借助两个自定义属性:appear
、appear-active-class
来实现,看上面代码。
过渡transition
和动画animation
同时使用
当同时使用transition
和animation
动画时,动画时长是由谁来确定呢?
Vue 提供了可手动设置,看下面代码
<transition name="fade"type="transition" //可手动设置动画时长以 transition 为准appearenter-active-class="animated swing"leave-active-class="animated shake"appear-active-class="animated swing"<div v-if="show">hello world</div>
</transition>
在transition
标签中,可以使用type
属性,它的用途是:如果同时有transition
和animation
时,此时将type
设置为transition
,它就以transition
动画时长为准。
回到代码,现在需要自己定义动画的时长,该怎么实现呢?
<transition name="fade":duration="10000" //动画总时长为 10sappearenter-active-class="animated swing"leave-active-class="animated shake"appear-active-class="animated swing"<div v-if="show">hello world</div>
</transition>
Vue 提供了duration
的属性,可以自定义动画时长。
这个自定义动画时长,还可以设置的复杂一点:
<transition name="fade":duration="{enter:5000,leave:10000}" //可分别设置 enter 动画时长和 leave 动画时长appearenter-active-class="animated swing"leave-active-class="animated shake"appear-active-class="animated swing"<div v-if="show">hello world</div>
</transition>
最后
在transition
标签中中不光v-if
能控制显示隐藏,v-show
也能控制显示隐藏,甚至动态组件也行。只要在transition
中标签中动画发生变化,都会有一个过渡效果
Vue 中 CSS 动画原理相关推荐
- Vue实战项目开发--Vue中的动画特效
项目的源代码在GitHub上:点击查看 目录 vue中的css动画原理 在Vue中使用Animate.css库 在Vue中同时使用过渡属性和动画 Vue中的Js动画与Velocity.js的结合 Vu ...
- vue中过渡动画(类名实现方式)
vue中过渡动画分为两类,一类是进场动画,一类是出场动画 要实现上面的进场动画,主要有三种方式:类名,css动画库,js函数 类名 本质就是动态添加类名实现动画 在进入/离开的过渡中,会有 6 个 c ...
- vue指令写在html中的原理,详解Vue中的MVVM原理和实现方法
对Vue中的MVVM原理解析和实现首先你对Vue需要有一定的了解,知道MVVM.这样才能更有助于你顺利的完成下面原理的阅读学习和编写下面由我阿巴阿巴的详细走一遍Vue中MVVM原理的实现,这篇文章大家 ...
- [vue] 你知道vue中key的原理吗?说说你对它的理解
[vue] 你知道vue中key的原理吗?说说你对它的理解 key的作用主要是为了高效的更新虚拟DOM; 如果没有唯一的key, 数据更新时, 相同节点更新前后无法准确一一对应起来,会导致更新效率降低 ...
- Vue中CSS模块化最佳实践
Vue风格指南中介绍了单文件组件中的Style是必须要有作用域的,否则组件之间可能相互影响,造成难以调试. 在Vue Loader Scope CSS和Vue Loader CSS Modules两节 ...
- 前端面试 vue生命周期钩子是如何实现的?理解vue中模板编译原理?
生命周期钩子在内部会被vue维护成一个数组(vue 内部有一个方法mergeOption)和全局的生命周期合并最终转换成数组,当执行到具体流程时会执行钩子(发布订阅模式),callHook来实现调用. ...
- [Vue源码] Vue中diff算法原理
一. Vue中diff算法原理 理解: 1.先同级比较,在比较子节点 2.先判断一方有儿子一方没儿子的情况 3.比较都有儿子的情况 4.递归比较子节点 图: 1.原节点:ABCD,新节点:ABCDE, ...
- Vue07---vue中的css动画原理及animate.css使用
目录 一.transition过渡动画原理 二.使用keyframes关键帧 三.在vue中使用animate.css 同时使用过渡和动画 一.transition过渡动画原理 当元素被transit ...
- vue中实现动画效果--三种方式
一.普通动画实现 效果 用一个按钮, 控制一个 div 的淡入和淡出 步骤 使用 js 控制 div 的 class name 点击 function anime() {var boxDom = do ...
最新文章
- c++连接mongodb出错
- SAP为什么并购sybase
- Shiro框架:缓存、session会话、自定义FormAuthenticationFilter、RemenberMe
- MySQL 多实例详解
- JS实现逼真的雪花飘落特效
- asp.net(c#) 将dbf转换为xls或wps,并将数据的列名改成中文;并判断本机是否安装office2003,2007和wps2007,2010...
- Java面试题18 牛客 假定Base b = new Derived();
- 用matlab求不动点迭代,科学网—数值分析--非线性方程组不动点迭代法matlab程序 - 殷春武的博文...
- hihocoder第220周-一道拧巴的题
- python面向对象使用方法_python面向对象之方法
- NGINX简介及工作原理
- Mirth Connect 第一章 快速安装
- SM2椭圆曲线公钥加密/解密算法
- OI退役记,第二部分,八十中记事
- 【深度学习】分类指标accuracy,recall,precision等的区别
- Mars3D中模型加载慢的优化办法
- SNMP的MIB文件语法
- 我国标准与国际标准的关系
- 数字化为宝马带来了什么
- 短路与和与、短路或和或的区别