用Vue2如何做过渡&动画效果+著名动画库

最新推荐文章于 2024-04-29 21:30:00 发布

孙俊熙

最新推荐文章于 2024-04-29 21:30:00 发布

阅读量1.1k

点赞数

分类专栏：前端文章标签：动画 css3 html5 Powered by 金山文档

原文链接：https://blog.nowcoder.net/n/90108a918c8d486984a054ec89aa10a6#1-animatecss

版权

前端专栏收录该内容

146 篇文章 4 订阅

订阅专栏

先推荐几个css第三方动画库：

1.1. Animate.CSS

Animate.CSS

进去后首页就是这个样式，右侧是不同的类对应的不同的动画效果。

往下翻就是官网文档内容，有安装教程和使用步骤，具体就不一一说明了，直接开始使用，我就直接跳过安装步骤了，看代码：

<template>
  <div class="animate-container">
    // 按钮
    <button @click="isShow = !isShow">切换</button>
    // 过渡&动画组件
    <transition enter-active-class="animate__animated animate__rotateIn" leave-active-class="animate__animated animate__rotateOut">
        // 盒子
        <div class="box" v-show="isShow"></div>
    </transition>
  </div>
</template>

<script>
// 引入 animate 三方动画库
import 'animate.css'
export default {
  name: 'animateWrap',
  data () {
    return {
      // 控制盒子显示与隐藏，false为隐藏，true为显示, 默认隐藏
      isShow: false
    }
  }
}
</script>

<style lang="less" scoped>
.box {
  width: 100px;
  height: 100px;
  background-color: #000;
  margin: 50px auto;
}
</style>

效果：

意思就是如果你要用人家的CSS动画类库，类名必须有 animate__animated 而且每个动画类前面必须加 animate__ 前缀，动画类就是首页右侧点击之后展示效果的那部分内容，每个效果对应每个类名。

但是，这时衍生了一个问题，我想给动画设置持续的时间，和开始生效前的延迟时间，我到底该如何设置呢？

不管是Vue官方还是Animate官方都给出了解决方案，我们先看 Vue官方的吧。

看完介绍，得知 transition 组件上有一个 duration 属性可以设置，注意单位是毫秒，1秒=1000毫秒.

<template>
  <div class="animate-container">
    // 按钮
    <button @click="isShow = !isShow">切换</button>
    // 过渡&动画组件
    <transition :duration="{enter: 300, leave:200}" enter-active-class="animate__animated animate__rotateIn" leave-active-class="animate__animated animate__rotateOut">
        // 盒子
        <div class="box" v-show="isShow"></div>
    </transition>
  </div>
</template>

效果：

可以明显看到变快了，感觉有点不协调了

那么去 Animate.css 官方文档中找找，怎么解决这个问题呢？

我为了大家方便阅读，所以给翻译了，可能有翻译不对的地方，可以自己去官网对照一下

官方给出了两种解决方案，我这里采用第二种(实用程序类)了，大家感兴趣的话可以自己练习一下

首先，我想让动画延迟2秒再执行，让动画的速度在2s内执行完，看文档找到了我需要的类名，分别是 animate__delay-2s 、animate__slow。

<template>
  <div class="animate-container">
    // 按钮
    <button @click="isShow = !isShow">切换</button>
    // 过渡&动画组件
    <transition enter-active-class="animate__animated animate__rotateIn animate__delay-2s animate__slow" leave-active-class="animate__animated animate__rotateOut animate__delay-2s animate__slow">
        // 盒子
        <div class="box" v-show="isShow"></div>
    </transition>
  </div>
</template>

肉眼可见的变得好慢好慢，也是说明我们实现了我们要的效果。

2. Animista

它是一个在线动画生成器，同时也是一个动画库，小伙伴一看在线动画生成器，心里爱的不得了吧，这样就不用敲代码了，直接copy哈哈，我个人还是比较喜欢勤奋的敲代码，因为你敲的越多越熟悉它，越了解它，如果只是为了省事，对代码不理解，自己还一直懒惰的话是没法继续成长的，我逛了好久这个库，试了试上面的功能，这上面动画类型还是很多的，而且还可以定制，我觉得用来学习参考是非常不错的，所以推荐给大家

Animista。

录的不是很全(因为体积太大上传不了)，基本使用就是上图中演示的样子，有很多很多的动画效果，感兴趣的小伙伴可以自己去尝试一下，还是很好玩的。

我自己也用了用，首先找到自己想要的动画效果。

按照图中顺序选择，最后点击第4步，会出现CSS源码

代码：

<template>
  <div class="animista-container">
    // 按钮
    <button @click="isShow = !isShow">点击执行</button>
    // 过渡&动画组件
    <transition
      enter-active-class="focus-in-contract-bck"
      leave-active-class="blur-out-expand-fwd"
    >
      // 文字内容
      <h3 v-show="isShow">你看清楚了吗</h3>
    </transition>
  </div>
</template>

<script>
export default {
  name: 'animistaWrap',
  data () {
    return {
      // 控制文字显示与隐藏
      isShow: false
    }
  }
}
</script>

<style lang="less" scoped>
// 进入(显示)的动画效果
.focus-in-contract-bck {
  -webkit-animation: focus-in-contract-bck 1s;
  animation: focus-in-contract-bck 1s;
}

/* ----------------------------------------------
 * Generated by Animista on 2022-5-9 18:20:5
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info.
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation focus-in-contract-bck
 * ----------------------------------------
 */
@-webkit-keyframes focus-in-contract-bck {
  0% {
    letter-spacing: 1em;
    -webkit-transform: translateZ(300px);
    transform: translateZ(300px);
    -webkit-filter: blur(12px);
    filter: blur(12px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateZ(12px);
    transform: translateZ(12px);
    -webkit-filter: blur(0);
    filter: blur(0);
    opacity: 1;
  }
}
@keyframes focus-in-contract-bck {
  0% {
    letter-spacing: 1em;
    -webkit-transform: translateZ(300px);
    transform: translateZ(300px);
    -webkit-filter: blur(12px);
    filter: blur(12px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateZ(12px);
    transform: translateZ(12px);
    -webkit-filter: blur(0);
    filter: blur(0);
    opacity: 1;
  }
}

// 离开(隐藏)的动画效果
.blur-out-expand-fwd {
  -webkit-animation: blur-out-expand-fwd 1s cubic-bezier(0.25, 0.46, 0.45, 0.94)
    both;
  animation: blur-out-expand-fwd 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

/* ----------------------------------------------
 * Generated by Animista on 2022-5-9 18:37:22
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info.
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation blur-out-expand-fwd
 * ----------------------------------------
 */
@-webkit-keyframes blur-out-expand-fwd {
  0% {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-filter: blur(0.01);
    filter: blur(0.01);
  }
  100% {
    letter-spacing: 1em;
    -webkit-transform: translateZ(300px);
    transform: translateZ(300px);
    -webkit-filter: blur(12px) opacity(0%);
    filter: blur(12px) opacity(0%);
  }
}
@keyframes blur-out-expand-fwd {
  0% {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-filter: blur(0.01);
    filter: blur(0.01);
  }
  100% {
    letter-spacing: 1em;
    -webkit-transform: translateZ(300px);
    transform: translateZ(300px);
    -webkit-filter: blur(12px) opacity(0%);
    filter: blur(12px) opacity(0%);
  }
}
</style>

效果：