Vue过渡效果之CSS过渡详解(结合transition,animation,animate.css)


Posted in Javascript onFebruary 05, 2020

以一个toggle按钮控制p元素显隐为例,如果不使用过渡效果,则如下所示

<div id="demo">
 <button v-on:click="show = !show">Toggle</button>
 <p v-if="show">蓝色理想</p>
</div>
<script>
new Vue({
 el: '#demo',
 data: {
  show: true
 }
})
</script>

如果要为此加入过渡效果,则需要使用过渡组件transition 

过渡组件

Vue提供了transition的封装组件,下面代码中,该过渡组件的名称为'fade'

<transition name="fade">
  <p v-if="show">蓝色理想</p>
 </transition>

当插入或删除包含在transition组件中的元素时,Vue会自动嗅探目标元素是否应用了 CSS 过渡或动画,如果是,在恰当的时机添加/删除 CSS 类名 

过渡类名

总共有6个(CSS)类名在enter/leave的过渡中切换

v-enter

定义进入过渡的开始状态。在元素被插入时生效,在下一个帧移除

v-enter-active

定义过渡的状态。在元素整个过渡过程中作用,在元素被插入时生效,在 transition 或 animation 完成之后移除。 这个类可以被用来定义过渡的过程时间,延迟和曲线函数

v-enter-to

定义进入过渡的结束状态。在元素被插入一帧后生效(与此同时 v-enter 被删除),在  transition 或 animation 完成之后移除

v-leave

定义离开过渡的开始状态。在离开过渡被触发时生效,在下一个帧移除

v-leave-active

定义过渡的状态。在元素整个过渡过程中作用,在离开过渡被触发后立即生效,在 transition 或 animation 完成之后移除。 这个类可以被用来定义过渡的过程时间,延迟和曲线函数

v-leave-to

定义离开过渡的结束状态。在离开过渡被触发一帧后生效(与此同时 v-leave 被删除),在 transition 或 animation 完成之后移除

对于这些在 enter/leave 过渡中切换的类名,v- 是这些类名的前缀,表示过渡组件的名称。比如,如果使用 <transition name="my-transition"> ,则 v-enter替换为 my-transition-enter

transition

常用的Vue过渡效果都是使用CSS过渡transition,下面增加一个enter时透明度变化,leave时位移变化的效果

<style>
.fade-enter{
 opacity:0;
}
.fade-enter-active{
 transition:opacity .5s;
}
.fade-leave-active{
 transition:transform .5s;
}
.fade-leave-to{
 transform:translateX(10px);
}
</style>
<div id="demo">
 <button v-on:click="show = !show">Toggle</button>  
 <transition name="fade">
  <p v-if="show">蓝色理想</p>
 </transition>
</div>
<script>
new Vue({
 el: '#demo',
 data: {
  show: true
 }
})
</script>

animation

CSS动画animation用法同CSS过渡transition,区别是在动画中 v-enter 类名在节点插入 DOM 后不会立即删除,而是在 animationend 事件触发时删除

下面例子中,在元素enter和leave时都增加缩放scale效果

<style>
.bounce-enter-active{
 animation:bounce-in .5s;
}
.bounce-leave-active{
 animation:bounce-in .5s reverse;
}
@keyframes bounce-in{
 0%{transform:scale(0);}
 50%{transform:scale(1.5);}
 100%{transform:scale(1);}
}
</style>
<div id="demo">
 <button v-on:click="show = !show">Toggle</button>  
 <transition name="bounce">
  <p v-if="show">蓝色理想</p>
 </transition>
</div>
<script>
new Vue({
 el: '#demo',
 data: {
  show: true
 }
})
</script>

同时使用

Vue 为了知道过渡的完成,必须设置相应的事件监听器。它可以是 transitionend 或 animationend ,这取决于给元素应用的 CSS 规则。如果使用其中任何一种,Vue 能自动识别类型并设置监听。

但是,在一些场景中,需要给同一个元素同时设置两种过渡动效,比如 animation 很快的被触发并完成了,而 transition 效果还没结束。在这种情况中,就需要使用 type 特性并设置 animation 或 transition 来明确声明需要 Vue 监听的类型

<style>
.fade-enter,.fade-leave-to{
 opacity:0;
}
.fade-enter-active,.fade-leave-active{
 transition:opacity 1s;
 animation:bounce-in 5s;
}
@keyframes bounce-in{
 0%{transform:scale(0);}
 50%{transform:scale(1.5);}
 100%{transform:scale(1);}
}
</style>
<div id="demo">
 <button v-on:click="show = !show">Toggle</button>  
 <transition name="fade" type="transition">
  <p v-if="show">蓝色理想</p>
 </transition>
</div>
<script>
new Vue({
 el: '#demo',
 data: {
  show: true,
 },
})
</script>

自定义类名

可以通过以下特性来自定义过渡类名

enter-class

enter-active-class

enter-to-class 

leave-class

leave-active-class

leave-to-class 

自定义类名的优先级高于普通的类名,这对于Vue的过渡系统和其他第三方CSS动画库,如 Animate.css 结合使用十分有用

<link rel="stylesheet" href="https://unpkg.com/animate.css@3.5.2/animate.min.css" rel="external nofollow" >
<div id="example">
 <button @click="show = !show">
  Toggle render
 </button>
 <transition name="xxx" enter-active-class="animated tada" leave-active-class="animated bounceOutRight">
  <p v-if="show">蓝色理想</p>
 </transition>
</div>
<script src="https://www.3water.com/vue"></script>
<script>
new Vue({
 el: '#example',
 data: {
  show: true
 }
})
</script>

初始渲染过渡

可以通过 appear 特性设置节点的在初始渲染的过渡

<transition appear>
 <!-- ... -->
</transition>

这里默认和进入和离开过渡一样,同样也可以自定义 CSS 类名

<transition
 appear
 appear-class="custom-appear-class"
 appear-to-class="custom-appear-to-class" 
 appear-active-class="custom-appear-active-class"
>
 <!-- ... -->
</transition>

下面是一个例子

<style>
.custom-appear-class{
 opacity:0;
 background-color:pink;
 transform:translateX(100px);
} 
.custom-appear-active-class{
 transition: 2s;
}
</style>
<div id="demo">
 <button @click="reset">还原</button>
 <transition appear  appear-class="custom-appear-class"
 appear-to-class="custom-appear-to-class" 
 appear-active-class="custom-appear-active-class">
  <p>蓝色理想</p>
 </transition>
</div>
<script>
new Vue({
 el: '#demo',
 methods:{
  reset(){
   history.go();
  }
 }
})
</script>

过渡时间

在很多情况下,Vue可以自动得出过渡效果的完成时机。默认情况下,Vue会等待其在过渡效果的根元素的第一个 transitionend 或 animationend 事件。然而也可以不这样设定——比如,可以拥有一个精心编排的一序列过渡效果,其中一些嵌套的内部元素相比于过渡效果的根元素有延迟的或更长的过渡效果

在这种情况下可以用<transition>组件上的duration属性定制一个显性的过渡效果持续时间 (以毫秒计)

下面的代码意味着元素在进入enter和离开leave时,持续时间都为1s,而无论在样式中它们的设置值为多少

<transition :duration="1000">...</transition>

也可以分别定制进入和移出的持续时间

<transition :duration="{ enter: 500, leave: 800 }">...</transition>

比如,下面的代码中,进入和移出的效果都为animate.css里面的shake效果,但持续时间分别是0.5s和1s

<div id="demo">
 <button v-on:click="show = !show">Toggle</button>  
 <transition :duration="{ enter: 500, leave: 1000 }" name="xxx" enter-active-class="animated shake" leave-active-class="animated shake">
  <p v-if="show">小火柴的蓝色理想</p>
 </transition>
</div>
<script>
new Vue({
 el: '#demo',
 data: {
  show: true
 }
})
</script>

过渡条件

一般地,在Vue中满足下列任意一个过渡条件,即可添加过渡效果

条件渲染(使用v-if)

常见的条件是使用条件渲染,使用v-if

<style>
.fade-enter,.fade-leave-to{
 opacity:0;
}
.fade-enter-active,.fade-leave-active{
 transition:opacity 1s;
}
</style>
<div id="demo">
 <button v-on:click="show = !show">Toggle</button>  
 <transition name="fade">
  <p v-if="show">蓝色理想</p>
 </transition>
</div>
<script>
new Vue({
 el: '#demo',
 data: {
  show: true
 }
})
</script>

条件展示(使用v-show)

使用条件展示,即使用v-show时,也可以添加过渡效果

<div id="demo">
 <button v-on:click="show = !show">Toggle</button>  
 <transition name="fade">
  <p v-show="show">蓝色理想</p>
 </transition>
</div>

动态组件

使用is属性实现的动态组件,可以添加过渡效果

<div id="demo">
 <button v-on:click="show = !show">Toggle</button>  
 <transition name="fade">
  <component :is="view"></component>
 </transition>
</div>
<script>
new Vue({
 el: '#demo',
 components:{
  'home':{template:'<div>蓝色理想</div>'}
 },
 data: {
  show: true,
 },
 computed:{
  view(){
   return this.show ? 'home' : '';
  }
 }
})

更多关于Vue动画效果的文章请点击下面的相关链接

Javascript 相关文章推荐
解决jquery的datepicker的本地化以及Today问题
May 23 Javascript
JavaScript onkeypress事件入门实例(按下或按住一个键盘按键)
Oct 17 Javascript
jQuery实现长按按钮触发事件的方法
Feb 02 Javascript
JavaScript实现显示函数调用堆栈的方法
Apr 21 Javascript
JS操作JSON方法总结(推荐)
Jun 14 Javascript
js实现textarea限制输入字数
Feb 13 Javascript
socket.io学习教程之基础介绍(一)
Apr 29 Javascript
Node.js+Express+MySql实现用户登录注册功能
Jul 10 Javascript
实例分析JS与Node.js中的事件循环
Dec 12 Javascript
vue-cli3脚手架的配置及使用教程
Aug 28 Javascript
使用vue脚手架(vue-cli)搭建一个项目详解
May 09 Javascript
JavaScript判断数组类型的方法
Oct 23 Javascript
vue 翻页组件vue-flip-page效果
Feb 05 #Javascript
在博客园博文中添加自定义右键菜单的方法详解
Feb 05 #Javascript
Vue中多元素过渡特效的解决方案
Feb 05 #Javascript
Vue路由管理器Vue-router的使用方法详解
Feb 05 #Javascript
Vue的状态管理vuex使用方法详解
Feb 05 #Javascript
浅谈Vue组件单元测试究竟测试什么
Feb 05 #Javascript
VUE中使用HTTP库Axios方法详解
Feb 05 #Javascript
You might like
Ext.data.PagingMemoryProxy分页一次性读取数据的实现代码
2010/04/07 PHP
php根据操作系统转换文件名大小写的方法
2014/02/24 PHP
thinkphp命名空间用法实例详解
2015/12/30 PHP
Javascript优化技巧(文件瘦身篇)
2008/01/28 Javascript
关于firefox的ElementTraversal 接口 使用说明
2010/11/11 Javascript
Javascript中的isNaN函数使用说明
2011/11/10 Javascript
页面回到顶部的三种实现(锚标记,js)
2012/10/01 Javascript
jQuery操作input值的各种方法总结
2013/11/21 Javascript
javascript中的正则表达式使用详解
2015/08/30 Javascript
浅谈JavaScript的push(),pop(),concat()方法
2016/06/03 Javascript
详解照片瀑布流效果(js,jquery分别实现与知识点总结)
2017/01/01 Javascript
Web制作验证码功能实例代码
2017/06/19 Javascript
JavaScript实现三级联动菜单效果
2017/08/16 Javascript
axios如何取消重复无用的请求详解
2019/12/15 Javascript
javascript设计模式 ? 外观模式原理与用法实例分析
2020/04/15 Javascript
解决vue prop传值default属性如何使用,为何不生效的问题
2020/09/21 Javascript
openlayers 3实现车辆轨迹回放
2020/09/24 Javascript
django自定义Field实现一个字段存储以逗号分隔的字符串
2014/04/27 Python
Python version 2.7 required, which was not found in the registry
2014/08/26 Python
Python写入数据到MP3文件中的方法
2015/07/10 Python
Python嵌套列表转一维的方法(压平嵌套列表)
2018/07/03 Python
使用python的pexpect模块,实现远程免密登录的示例
2019/02/14 Python
Python分支语句与循环语句应用实例分析
2019/05/07 Python
Python变量、数据类型、数据类型转换相关函数用法实例详解
2020/01/09 Python
如何使用python的ctypes调用医保中心的dll动态库下载医保中心的账单
2020/05/24 Python
Python tkinter界面实现历史天气查询的示例代码
2020/08/23 Python
Python将list元素转存为CSV文件的实现
2020/11/16 Python
Sneaker Studio波兰:购买运动鞋
2018/04/28 全球购物
保送生自荐信范文
2013/10/06 职场文书
论文诚信承诺书
2014/05/23 职场文书
2014年工人工作总结
2014/11/25 职场文书
表扬稿范文
2015/01/17 职场文书
销售开票员岗位职责
2015/04/15 职场文书
2016年小学中秋节活动总结
2016/04/05 职场文书
二年级作文之动物作文
2019/11/13 职场文书
JavaScript 反射学习技巧
2021/10/16 Javascript