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

一、前言：

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

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

二、过渡：

1.简介：

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

2.六个过渡的类：

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

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

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

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

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

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

这六个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.简单案例：

    toggle
    
         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;
}

效果为： 

三、动画

 1.简介：

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

2.简单案例：

    toggle
    
         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;
      }
}

效果为：

四、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
}

 效果为：

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

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

    点我 
    
        

    

  

效果为：

注意：自定义过渡类名加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

案例：

    点我 
    
        

    

效果：

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

    点我