前端开发项目中实现极佳的过渡&动画效果

1、Animate.CSS

前言

animate.css 是一个有趣，酷炫的，跨浏览器的动画库，你可以将它用于你的项目中。不管是主页，滑动切换，又或者是其它方面，你都可以通过它来制作出惊人的效果。
在这里插入图片描述

基本用法

引入库

npm install animate.css --save
/*or*/
<link rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
  />

页面使用

// 动画 animate.css
import animate from "animate.css";

在 transition 标签中给对应动作的类名加上动画库中的类就行啦。 leave-active-class 消失时候的效果动画
enter-active-class 显示时候的效果动画
其次需要注意的是，在添加动画前需要在动画名前加入animate.css的前缀animate__animated

代码实例

<template>
	<div>
	   <el-button @click="show = !show">预览</el-button>
		<transition 
		enter-active-class="animate__animated  animate__flip 								 animate__repeat-5"
        leave-active-class="animate__animated animate__rotateOutDownLeft">
          <h1 v-show="show = !show">Animate.css</h1>
        </transition>
	</div>
</template>

Animista

前言

Animista与其说是一个库，不如说是一个CSS动画平台，因为它按需提供动画，即你在平台可以选择想要的动画类型，然后为你生成动画CSS关键帧代码。

基本用法

进入官网，在线按如图四个步骤找到合适的动画
在这里插入图片描述
按照图中顺序选择，最后点击第4步，会出现CSS源码，直接copy下来就可以使用

代码实例

<template>
	<div>
		<div class="animate-container">
      <el-button @click="show = !show">预览</el-button>
      <transition enter-active-class="rotate-center" leave-active-class="scale-out-top">
        <h1 v-show="show">Animista</h1>
      </transition>
    </div>
	</div>
</template>
<style scoped>
.rotate-center {
  -webkit-animation: rotate-center 0.6s ease-in-out both;
  animation: rotate-center 0.6s ease-in-out both;
}

.scale-out-top {
  -webkit-animation: scale-out-top 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
  animation: scale-out-top 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
}


@-webkit-keyframes rotate-center {
  0% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }

  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes rotate-center {
  0% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }

  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}


@-webkit-keyframes scale-out-top {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transform-origin: 50% 0%;
    transform-origin: 50% 0%;
    opacity: 1;
  }

  100% {
    -webkit-transform: scale(0);
    transform: scale(0);
    -webkit-transform-origin: 50% 0%;
    transform-origin: 50% 0%;
    opacity: 1;
  }
}

@keyframes scale-out-top {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transform-origin: 50% 0%;
    transform-origin: 50% 0%;
    opacity: 1;
  }

  100% {
    -webkit-transform: scale(0);
    transform: scale(0);
    -webkit-transform-origin: 50% 0%;
    transform-origin: 50% 0%;
    opacity: 1;
  }
}
</style>

GSAP

gsap

前言

GSAP👍🏼是前端业内非常有名的一个动效库，有大量的优秀的网站都在使用它。它不仅能在原生JS的环境下使用，也能配合各种当前流行的框架进行使用。

GSAP的全称是GreenSock Animation Platform，它是一个功能非常强大的动画平台，它可以对JavaScript操作的所有内容实现动画效果，同时，还解决了不同浏览器中存在的兼容性问题，而且速度和效率都非常快，全球超过1000万过站点都在使用它提供的动画。

基本使用

引入库

npm install gsap

页面使用

import gsap from 'gsap';

主要通过js来控制实现动画效果，主要的属性可以参考官网中的实例；
常使用属性：
在这里插入图片描述

在这里插入图片描述

代码实例

<template>
  <div class="action">
    <el-button type="primary" @click="increment()">start</el-button>
    <div style="font-size: 30px; color: blue;">{{ counter.toFixed(0) }}</div>

    <div class="boxSty">translation</div>

    <div class="bounce">bounce</div>

    <div class="leftBox">
      <div class="box1">box1</div>
      <div class="box2">box2</div>
      <div class="box3">box3</div>
    </div>

    <div class="rightBox">
      <div style="display: flex;">
        <div class="box5">box5</div>
        <div class="box4">box4</div>
      </div>
    </div>

  </div>
</template>

<script>
import gsap from 'gsap';
export default {
  name: 'gasp',
  data() {
    return {
      counter: 0
    }
  },
  methods: {
    // 点击start按钮触发一系列动画
    increment() {
      //动态数字变化
      gsap.to(this,
        {
          duration: 3,
          counter: this.counter + 100,
        })

      // ---------------------------------------------
      // gsap.to(".boxSty", { x: 500 })
      gsap.to(".boxSty", {
        x: '80vw', // 传入数值或者视口宽度单位vw
        y: '20vh',
        rotation: 360, // 旋转如果直接输入数字的话默认是degree的单位，既角度值单位
        // rotation: "3rad", // 如果你要弧度值，就要这么写
        duration: 2, //动画时长
        repeat: 2,
        yoyo: true,
      })

      // ---------------------------------------------
      gsap.to(".bounce", {
        rotation: 360,
        duration: 2,
        ease: "bounce.in" // 弹跳效果---in\out\inOut
      })

      // ---------------------------------------------
      // 创建Timeline类型的实例
      let tl = gsap.timeline()
      // 把tween动画添加到timeline实例上，然后我们这里用tl.to去驱动动画，而不是gsap.to
      tl.to(".box1", { x: 600, duration: 2 });
      tl.to(".box2", { x: 600, duration: 1, delay: 1 }); // delay:延迟1秒
      tl.to(".box3", { x: 600, duration: 1 });

      // ---------------------------------------------
      var t2 = gsap.timeline()
      t2.to(".box4", { duration: 1, x: 700 })
        .to(".box5", { duration: 2, x: 700, ease: "bounce" })

    }
  }
}
</script>
<style scoped>
.boxSty {
  width: 100px;
  height: 100px;
  font-size: 20px;
  background: #cab8b8;
  border-radius: 6px;
}

.bounce {
  position: fixed;
  width: 100px;
  height: 100px;
  font-size: 20px;
  background: #9d95ff;
  border-radius: 6px;
  left: 50%;
  transform: translate(-50%, 50%);
}

.leftBox {
  position: fixed;
  bottom: 0;
  /* transform: translate(-50%, 50%); */
}

.box1 {
  background: green;
  width: 50px;
  height: 50px;
  border-radius: 6px;
}

.box2 {
  background: purple;
  width: 50px;
  height: 50px;
  margin: 12px 0;
  border-radius: 6px;
}

.box3 {
  background: orange;
  width: 50px;
  height: 50px;
  border-radius: 6px;
}


.rightBox {
  position: fixed;
  bottom: 0;
  left: 50%;
}

.box4 {
  background: #9d95ff;
  width: 50px;
  height: 50px;
  border-radius: 6px;
}

.box5 {
  background: #cab8b8;
  width: 50px;
  height: 50px;
  border-radius: 6px;
}
</style>

请添加图片描述