资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划,从策略到执行的一站式服务

Vue实现过渡效果的示例分析

小编给大家分享一下Vue实现过渡效果的示例分析,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!

成都创新互联成立与2013年,先为浦东等服务建站,浦东等地企业,进行企业商务咨询服务。为浦东企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。

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


 Toggle
 蓝色理想

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

过渡组件

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

 
  蓝色理想

 

当插入或删除包含在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- 是这些类名的前缀,表示过渡组件的名称。比如,如果使用 ,则 v-enter替换为 my-transition-enter

transition

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



 Toggle  
 
  蓝色理想

 

animation

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

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



 Toggle  
 
  蓝色理想

 

同时使用

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

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



 Toggle  
 
  蓝色理想

 

自定义类名

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

enter-class

enter-active-class

enter-to-class 

leave-class

leave-active-class

leave-to-class 

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



 
  Toggle render
 
 
  蓝色理想

 

初始渲染过渡

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


 

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


 

下面是一个例子



 还原
 
  

蓝色理想

 

过渡时间

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

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

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

...

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

...

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


 Toggle  
 
  小火柴的蓝色理想

 

过渡条件

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

条件渲染(使用v-if)

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



 Toggle  
 
  蓝色理想

 

条件展示(使用v-show)

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


 Toggle  
 
  蓝色理想

 

动态组件

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


 Toggle