vue过渡&动画&Animate.css动画库(1)

一、前言:

在开发中,我们想要给一个组件的显示和消失添加某种过渡动画,可以很好的增加用户体验,

Vue中为我们可以自定义过渡或动画或者Vue提供一些内置组件完成动画,利用它们我们可以方便的实现过渡动画效果.

二、过渡:

1.简介:

过渡其实就是一个淡入淡出的效果,Vue 提供了 transition 的封装组件,在下列情形中,可以给任何元素和组件添加进入/离开过渡

2.六个过渡的类:

  • v-enter:定义进入过渡的开始状态。在元素被插入之前生效,在元素被插入之后的下一帧移除。

  • v-enter-active:定义进入过渡生效时的状态。在整个进入过渡的阶段中应用,在元素被插入之前生效,在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间,延迟和曲线函数。

  • v-enter-to2.1.8版及以上 定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter 被移除),在过渡/动画完成之后移除。

  • v-leave: 定义离开过渡的开始状态。在离开过渡被触发时立刻生效,下一帧被移除。

  • v-leave-active:定义离开过渡生效时的状态。在整个离开过渡的阶段中应用,在离开过渡被触发时立刻生效,在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间,延迟和曲线函数。

  • v-leave-to2.1.8版及以上 定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave 被删除),在过渡/动画完成之后移除。

vue过渡&动画&Animate.css动画库(1)_第1张图片

这六个class中使用频率最多的是:v-enter,v-enter-active,v-leave-to,v-leave-active。

对于这些在过渡中切换的类名来说,如果你使用一个没有名字的 ,则 v- 是这些类名的默认前缀。如果你使用了 ,那么 v-enter 会替换为 first-enter

3.自定义过渡的类名

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

  • enter-class
  • enter-active-class
  • enter-to-class (2.1.8+)
  • leave-class
  • leave-active-class
  • leave-to-class (2.1.8+)

自定义过渡的类名优先级高于普通的

4.简单案例:

div class="box" v-if="but">
.v-enter,
.v-leave-to {
    opacity: 0;
    transform: translateY(200px);
}

.v-enter-active,
.v-leave-active {
    transition: all 0.5s;
}

效果为: 

vue过渡&动画&Animate.css动画库(1)_第2张图片

三、动画

 1.简介:

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

2.简单案例:

div class="box" v-if="but">

.v-enter-active {
      animation: bounce-in 0.5s
}

.v-leave-active {
      animation: bounce-in 0.5s reverse
}
@keyframes bounce-in {
      0% {
        opacity: 0;
      }

      100% {
         opacity: 1;
      }
}

效果为:

vue过渡&动画&Animate.css动画库(1)_第3张图片

四、Animate.css动画库

1、简介

Animate.css是一个现成的跨浏览器动画库,可用于web项目。非常适合强调、主页、滑块和注意力引导提示。

2、安装

查看animate官网

3、简单案例

//此时动画的名称为Animate.css中写好的类名称:backInDown
.fourth-enter-active {
    animation: backInDown 0.5s
}

.fourth-leave-active {
    animation: backInDown 0.5s reverse
}

 效果为:

vue过渡&动画&Animate.css动画库(1)_第4张图片

 更多的效果可以参考官网只需要找到右边的名称点击复制即可

vue过渡&动画&Animate.css动画库(1)_第5张图片

4、Animate.css用于自定义过渡类名

  

效果为:

vue过渡&动画&Animate.css动画库(1)_第6张图片

注意:自定义过渡类名加Animate动画需要加前缀:animate__animated

5、自定义过渡类中使用Animate.css动画库并设置延迟效果

Class name Default delay time
animate__delay-2s 2s
animate__delay-3s 3s
animate__delay-4s 4s
animate__delay-5s 5s

案例:

效果:

vue过渡&动画&Animate.css动画库(1)_第7张图片

6、自定义过渡类中使用Animate.css动画库并设置持续时间 

方法一:在css中设置单个Animate库的持续时间

.animate__animated.animate__bounceInDown {
    --animate-duration: 4s;
}

.animate__animated.animate__bounceInUp {
    --animate-duration: 3s;
}

方法二:也可以在自定义过渡类中设置集成的持续时间函数

Class name Default speed time
animate__slow 2s
animate__slower 3s
animate__fast 800ms
animate__faster 500ms

你可能感兴趣的:(vue,vue,动画)