Vue的transition过渡组件动画怎么使用

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue的transition过渡组件动画怎么使用相关的知识,希望对你有一定的参考价值。

参考技术A 1.需要组件有使用 v-show 或者 v-if 的指令

2.使用方法 tranistion 标签加 name属性

例如:

3.添加样式

4.sort-enter  .sort-enter-to .sort-enter-active  这个分别是 鼠标进入 的动画   开始 结束 过渡效果

.sort-leave .sort-leave-to .sort-leave-active 这个分别是 鼠标离开 的动画 离开前 离开后 过渡效果

Vue3过渡 & 动画实现

Vue3动画

基本使用

内置组件 transition,在下面情况中,可以给任何元素和组件添加进入和离开动画。

  • 条件渲染( v-if 或者v-show )
  • 动态组件( component )

transition组件的原理

  • 当删除或者添加包含在transition组件的元素时,vue会自动嗅探目标元素是否引用了css属性的过度和动画,vue会在一定的时刻添加或删除css类名。
  • transition组件CSS未设置过度和动画,并且vue没有取到动画的JavaScript的动画钩子,那么是立即执行的。

过渡动画的class

  • v-enter-from:进入过渡开始的前一帧
  • v-enter-active:进入过渡的过程
  • v-enter-to:进入过渡结束的状态,完成过渡的过程的最后一帧
  • v-leave-from:离开过渡的前一帧
  • v-leave-active:离开过渡的过程
  • v-leave-to:离开过渡结束的状态,完成过渡的过程的最后一帧

image-20210615220251521

命名规则

transition内添加name属性,没有的化,class类名默认v-开头,加了name之后以,name属性值-开头

transition实现

过渡实现

一般运用过渡的化,我们得为过渡的过程提供,起始和结束两个状态,又时结束进入过渡,和开始离开过渡的状态时可以不写的,因为我们在不加动画时,默认就是到那个状态

动画实现

单纯用动画一般我们时只在过渡过程中运用动画就行了,并不需要提供初始状态值。

动画和过渡同时存在

只是上面两种情况相互结合起来运用,但是会存在一些问题,比如过渡和动画的执行时间不一致,造成的而后果不是我们想要的情况

  • mode属性,一般是transitionanimation选其一,告诉vue是以 animation还是 transition的结束时间为准
  • duration属性,手动指定动画执行的时间,当我们设置这个之后,css内的动画和过渡的时间不再生效

点击按钮切换案例

image-20210615222346034

transition的自定义class

  • enter-from-class
  • enter-active-class
  • enter-to-class
  • leave-from-class
  • leave-active-class
  • leave-to-class

对应的时刻对应的class,与 Animate.css. 结合使用十 分有用

当动态组件遇到 transition

在组件切换的时候会遇到如下问题:上一个页面还在消失的过程中,但下一个页面已经在出现过程中,下面属性可以解决

  • mode:
    • out-in:上个要消失的元素或组件先消失,等到消失完之后,下一个组件或者元素再进入。
    • in-out:下一个要出现的组件或者元素先进入,等到进入完之后,上一个组件或者元素再消失。

同时我们希望在也页面初始化的时候就执行一次动画

  • appear属性

transition结合Animate.css使用

安装:npm install animate.css

使用:

  • main.js内引入 import "animate.css"

组件内使用

通过Animate.css提供的 className

image-20210615224201293

通过动画名字

image-20210615224517031

transition的动画的钩子函数

image-20210615225957633

  • 其实和之前的类似,只是这是函数,到了某个时刻就调用某个函数

  • cancelled是在过程中撤销操作,才会回调。

  • enterleave对应函数有两个参数 eldone

    • el:参与动画的元素
    • done:过渡过程是否完成。
  • css:false,使元素设置的动画css失效

  • 在下面的gsap库里有使用。

transition结合gsap使用

css只能提供一些固定的动画效果,一些复杂的效果,显得无能为力,这时就得用 js 来设置动画

js 动画库 gsap

安装:npm install gsap

使用:

  • 在要用到的页面引用import gsap from 'gsap'
  • image-20210615225803889

注意:除了有固定的GSAP对应的属性可以设置,还可也额外设置自己的属性,根据 to 或者 from 传入的第一个参数来决定。

例如 在第二个参数的对象内设置 vue data里面的值

image-20210615231024850

列表过渡transition-group的使用

那么渲染的是一个列表,并且该列表中添加删除数据也希望有动画执行,vue还提供了另一个组件 transition-group

  • 默认情况下,它不会渲染一个元素的包裹器,但是你可以指定一个元素并以 tag attribute 进行渲染;
  • mode属性失效
  • 内部元素提供一个唯一的key值

使用

  • 过渡动画的class的规则同意适用于这里
  • 动画的钩子函数也可以在这里使用

使用类似,不做详细解释了。

开发小技巧

image-20210615232020009

部元素提供一个唯一的key值

使用

  • 过渡动画的class的规则同意适用于这里
  • 动画的钩子函数也可以在这里使用

使用类似,不做详细解释了。

开发小技巧

在这里插入图片描述

以上是关于Vue的transition过渡组件动画怎么使用的主要内容,如果未能解决你的问题,请参考以下文章

Vue3过渡 & 动画实现

组件或者标签要使用过渡效果,必须使用啥标签

vue切换组件动画 / vue-transition过渡动画

vue的动画组件(transition)

(transition动画组件)

vue3 transition 组件使用总结