动画库的使用

Code female artist

已于 2024-01-03 16:44:43 修改

阅读量1.1k

点赞数 10

文章标签： vue

于 2024-01-03 16:43:06 首次发布

本文链接：https://blog.csdn.net/2301_81331526/article/details/135367270

版权

本文介绍了如何在项目中使用AOS和Animate.css这两个动画库，包括官方地址、安装步骤、在Vue项目中的引入和配置，以及各种动画效果的详细说明。

摘要由CSDN通过智能技术生成

一、AOS动画库的使用

1、官网地址：http://michalsnik.github.io/aos/

2、安装：

npm install aos -S

3、main.js中引入：

import AOS from 'aos'
import 'aos/dist/aos.css'
AOS.init() //初始化

4、初始化设置：

AOS.init({
  //全局设置：
  disable: false, //接受以下值：'phone','tablet','mobile',布尔值，表达式或函数,禁用不同设备下的aos
  startEvent: "DOMContentLoaded", //在文档上分派的事件的名称，AOS应该在该事件上进行初始化
  initClassName: "aos-init", //初始化后应用的类
  animatedClassName: "aos-animate", //应用于动画的类
  useClassNames: false, //如果为真，将在滚动中添加data-aos的内容作为类
  disableMutationObserver: false, //取消自动突变检测(高级)
  debounceDelay: 50, //在调整窗口大小时使用的取消延迟(高级)
  throttleDelay: 99, //滚动页面时使用的油门延迟（高级）

  //可以通过data-aos属性逐个设置的设置：
  offset: 120, //初始触发点的偏移量(单位:px)
  delay: 0, //延迟时间值从0到3000 ，步长为50毫秒，
  duration: 400, //持续时间,值从0到3000，步长为50毫秒
  easing: "ease", // AOS动画的默认缓动
  once: false, //动画是否应该只发生一次
  mirror: false, //当滚动经过元素时，是否应该将其动画化
  anchorPlacement: "top-bottom", //定义元素相对于窗口的哪个位置应该触发动画
});

5、常见动画：

① 淡入淡出动画：

fade-up
fade-down
fade-left
fade-right
fade-up-right
fade-up-left
fade-down-right
fade-down-left

② 翻转动画：

flip-up
flip-down
flip-left
flip-right

③ 滑动动画：

slide-up
slide-down
slide-left
slide-right

④ 缩放动画：

zoom-in
zoom-in-up
zoom-in-down
zoom-in-left
zoom-in-right
zoom-out
zoom-out-up
zoom-out-down
zoom-out-left
zoom-out-right

⑤ 锚位置

top-bottom
top-center
top-top
center-bottom
center-center
center-top
bottom-bottom
bottom-center
bottom-top

⑥ easing动画

你可以使用以下的一些easing动画效果：

linear
ease
ease-in
ease-out
ease-in-out
ease-in-back
ease-out-back
ease-in-out-back
ease-in-sine
ease-out-sine
ease-in-out-sine
ease-in-quad
ease-out-quad
ease-in-out-quad
ease-in-cubic
ease-out-cubic
ease-in-out-cubic
ease-in-quart
ease-out-quart
ease-in-out-quart

二、animate.css动画库的使用

1、官网地址：https://animate.style/#javascript

2、安装：

npm install animate.css --save

3、main.js中引入：

import animated from 'animate.css'
Vue.use(animated)

4、使用

//vue模板中：
<div>
  <!-- 直接使用animated中的动画class名，注意：必须使用animated这个class名，否则动画会无效 -->
  <div class="animated fadeIn"></div>
</div>

5、效果属性：

fade: {
    title: '淡入淡出',
    fadeIn: '淡入',
    fadeInDown: '向下淡入',
    fadeInDownBig: '向下快速淡入',
    fadeInLeft: '向右淡入',
    fadeInLeftBig: '向右快速淡入',
    fadeInRight: '向左淡入',
    fadeInRightBig: '向左快速淡入',
    fadeInUp: '向上淡入',
    fadeInUpBig: '向上快速淡入',
    fadeOut: '淡出',
    fadeOutDown: '向下淡出',
    fadeOutDownBig: '向下快速淡出',
    fadeOutLeft: '向左淡出',
    fadeOutLeftBig: '向左快速淡出',
    adeOutRight: '向右淡出',
    fadeOutRightBig: '向右快速淡出',
    fadeOutUp: '向上淡出',
    fadeOutUpBig: '向上快速淡出'
  },
  bounce: {
    title: '弹跳类',
    bounceIn: '弹跳进入',
    bounceInDown: '向下弹跳进入',
    bounceInLeft: '向右弹跳进入',
    bounceInRight: '向左弹跳进入',
    bounceInUp: '向上弹跳进入',
    bounceOut: '弹跳退出',
    bounceOutDown: '向下弹跳退出',
    bounceOutLeft: '向左弹跳退出',
    bounceOutRight: '向右弹跳退出',
    bounceOutUp: '向上弹跳退出'
  },
  zoom: {
    title: '缩放类',
    zoomIn: '放大进入',
    zoomInDown: '向下放大进入',
    zoomInLeft: '向右放大进入',
    zoomInRight: '向左放大进入',
    zoomInUp: '向上放大进入',
    zoomOut: '缩小退出',
    zoomOutDown: '向下缩小退出',
    zoomOutLeft: '向左缩小退出',
    zoomOutRight: '向右缩小退出',
    zoomOutUp: '向上缩小退出'
  },
  rotate: {
    title: '旋转类',
    rotateIn: '顺时针旋转进入',
    rotateInDownLeft: '从左往下旋入',
    rotateInDownRight: '从右往下旋入',
    rotateInUpLeft: '从左往上旋入',
    rotateInUpRight: '从右往上旋入',
    rotateOut: '顺时针旋转退出',
    rotateOutDownLeft: '向左下旋出',
    rotateOutDownRight: '向右下旋出',
    rotateOutUpLeft: '向左上旋出',
    rotateOutUpRight: '向右上旋出'
  },
  flip: {
    title: '翻转类',
    flipInX: '水平翻转进入',
    flipInY: '垂直翻转进入',
    flipOutX: '水平翻转退出',
    flipOutY: '垂直翻转退出'
  },
  strong: {
    title: '强调类',
    bounce: '弹跳',
    flash: '闪烁',
    pulse: '脉冲',
    rubberBand: '橡皮筋',
    shake: '左右弱晃动',
    swing: '上下摆动',
    tada: '缩放摆动',
    wobble: '左右强晃动',
    jello: '拉伸抖动'
  }

用法：

过渡动画的必要条件：
1、
    条件渲染：(使用v-if)
    条件展示：(使用v-show)
    动态组件
    组件根节点
2、
    需要执行动画的元素需要被transition内置组件进行包裹
    transition组件有个属性name，值为动画名称
3、编写动画
    vue 6个类名来编写动画,(v代表name属性值):
    
    进入时动画(显示)，头——中——尾：
        v-enter
        v-enter-active
        v-enter-to
    离开时动画(隐藏),头——中——尾： 
        v-leave
        v-leave-active
        v-leave-to
  
注意：如果需要多个元素添加动画则需要将transition换成transition-group，
并且给每一个子元素添加唯一的key值

4、网址：https://www.bootcdn.cn/animate.css/，下载并引入animate.css.
针对于第三方css动画库，transition给我们提供了6个属性，用来使用第三方css3动画库

  进入时动画(显示)，头——中——尾：
    enter-class=""
    enter-active-class=""
    enter-to-class=""
  离开时动画(隐藏),头——中——尾:
    leave-class=""
    leave-active-class=""
    leave-to-class=""

例子：

<template>
  <div class="animated">
    <button @click="handleToggle" :class="isOk?classA:classB">上下切换</button>
    <button @click="handleToggle1">多元素切换</button>
    <button @click="handleToggle2">底部切换</button>
    <button @click="handleToggle3">切换(动画库)</button>

    <transition name="fade">
      <div class="box" v-if="isShow"></div>
    </transition>

    <transition-group name="move">
      <div class="box" v-if="isShow1" key="1"></div>
      <div class="box" v-if="isShow1" key="2"></div>
    </transition-group>

    <transition name="bottom">
      <div class="box2" v-if="isShow2"></div>
    </transition>

    <!-- 过渡animated，可以自定义animated_d -->
    <transition
      enter-class
      enter-active-class="animated"
      enter-to-class="zoomInRight"
      leave-class
      leave-active-class="animated"
      leave-to-class="hinge"
    >
      <div class="box1" v-if="isShow3">animation</div>
    </transition>
  </div>
</template>
<script>
export default {
  name: "animated",
  data() {
    return {
      isShow: false,
      isShow1: true,
      isShow2: false,
      isShow3: false,

      isOk: true,
      classA: "class_a",
      classB: "class_b"
    };
  },
  methods: {
    handleToggle() {
      this.isShow = !this.isShow;
      this.isOk = !this.isOk;
      console.log(this.isShow);
    },
    handleToggle1() {
      this.isShow1 = !this.isShow1;
    },
    handleToggle2() {
      this.isShow2 = !this.isShow2;
    },
    handleToggle3() {
      this.isShow3 = !this.isShow3;
    }
  },
  mounted() {
    this.handleToggle3();
  }
};
</script>
<style lang="scss">
.class_a {
  background: #409eff!important;
}
.class_b {
  background: green!important;
}

.animated {
  text-align: center;
  button {
    display: inline-block;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    background: #409eff;
    border: 0;
    color: #fff;
    -webkit-appearance: none;
    text-align: center;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    outline: 0;
    margin: 0;
    -webkit-transition: 0.1s;
    transition: 0.1s;
    font-weight: 500;
    padding: 12px 20px;
    font-size: 14px;
    border-radius: 4px;
    margin-right: 15px;
  }
  .box {
    width: 100px;
    height: 100px;
    margin: 5px;
    background: red;
    margin: 10px auto;
  }
  // // 开始进入显示
  //   .fade-enter {
  //     // opacity: 0;
  //     height: 0;
  //   }
  //   .fade-enter-active {
  //     transition: all 2s;
  //   }
  // //   .fade-enter-to {
  // //     // opacity: 1;
  // //     height: 100px;
  // //   }
  // // 结束隐藏
  // //   .fade-leave {
  // //     // opacity: 1;
  // //     height: 100px;
  // //   }
  //   .fade-leave-active {
  //     transition: all 2s;
  //   }
  //   .fade-leave-to {
  //     // opacity: 0;
  //     height: 0;
  //   }
  .fade-enter,
  .fade-leave-to {
    // opacity: 0;
    height: 0;
  }
  .fade-enter-active,
  .fade-leave-active {
    transition: all 2s;
  }

  .move-enter,
  .move-leave-to {
    transform: translateX(500px);
    opacity: 0;
  }
  .move-enter-active,
  .move-leave-active {
    transition: all 2s;
  }

  .box2 {
    width: 100%;
    height: 200px;
    background: pink;
    position: absolute;
    left: 0;
    // 不能是-200，可设置isShow属性为false隐藏
    bottom: 0;
  }
  //   // 开始进入显示
  //   .bottom-enter {
  //     bottom: -200px;
  //   }
  //   .bottom-enter-active {
  //     transition: all 2s;
  //   }
  //   .bottom-enter-to {
  //     bottom: 0;
  //   }
  // // 结束隐藏
  //   .bottom-leave {
  //     bottom: 0;
  //   }
  //   .bottom-leave-active {
  //     transition: all 2s;
  //   }
  //   .bottom-leave-to {
  //     bottom: -200px;
  //   }

  .bottom-enter,
  .bottom-leave-to {
    bottom: -200px;
  }
  .bottom-enter-active,
  .bottom-leave-active {
    transition: all 0.3s;
  }
  .box1 {
    width: 150px;
    height: 50px;
    font-size: 36px;
    margin: auto;
    // animation:动画名称，过渡/执行时间，延时，速度类型(linear:匀速)，动画执行次数;
    // animation: zoomInRight 3s  0s linear infinite alternate;
  }

  /* 自定义，第三方动画库默认animated*/
  .animated_d {
    -webkit-animation-duration: 3s;
    animation-duration: 1s;
    -webkit-animation-duration: var(--animate-duration);
    animation-duration: var(--animate-duration);
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    // 延迟
    animation-delay: 10s;
  }

  /*
  animation:动画名称，过渡/执行时间，延时，速度类型，动画执行次数;
  可设置多个属性
  
  【速度类型】linear(匀速)，ease(逐渐慢下来)，ease-in(由慢到快)，ease-out(由快到慢)
  ease-in-out(先慢到快再到慢)，cubic-bezier(该值允许你去自定义一个时间曲线)

  【动画执行次数】forwards(动画只执行一次)，infinite(动画无限次执行)，alternate(动画反复执行，必须有infinite属性)
  
  【动画延时】
  animation-delay: 2s;

*/
}
</style>