1.前言
最近在看这个
animation.css
- 版本更新的一些问题 ,就是
3X和4x的一些问题- 本地引用都好说
- 项目使用的 写法还不太一样
- 所有就简单总结下
2. anmiation.css 准备
安装
npm install animate.css --save
这里默认安装的是最新的
4x版本
引入
main.js
import animated from "animate.css"; Vue.use(animated)
3. 常规用法
<div class="classA a">幸会</div> .classA { width: 200px; height: 200px; background-color: red; font-size: 50px; color: white; text-align: center; line-height: 200px; } .a { animation: bounce 1s; animation-iteration-count: 3; }
4.transition 使用第一种方式
<button @click="show = !show">显示/隐藏</button> <transition name="yzs"> <div :class="styA" v-show="show">animate动画</div> </transition>
classA
.classA { width: 200px; height: 200px; background-color: red; font-size: 50px; color: white; text-align: center; line-height: 200px; } /* 这个动画的名字 官网找 自己喜欢的 */ .yzs-enter-active { animation: backInLeft 1s; } /* 这个动画的名字 官网找 自己喜欢的 v注意这个写法 直接复制的官网不行 .因为官网是3x写法 */ .yzs-leave-active { animation: backInUp 1s; }
5. transition第二种写法
animate__animated 不要写错
animate__bounceInLeft
上面的 animate_ 都不能省略
<button @click="show = !show">显示/隐藏</button> <transition enter-active-class="animate__animated animate__bounceInLeft" leave-active-class="animate__animated animate__backInUp"> <div :class="styA" v-show="show">2-2</div> </transition>
6. 多个动画
<template> <div> <button @click="show = !show">05-显示/隐藏</button> <!-- 添加多个过渡动画：对于多个标签而言 当有相同的标签元素切换时，需要通过key来设置唯一标识，以便于vue区分， 否则vue为了提高执行效率，只会替换相同标签内部的内容部分 --> <transition enter-active-class="animate__animated animate__zoomIn" leave-active-class="animate__animated animate__zoomOut" mode="out-in" > <div key="1" :class="styA" v-if="show">one动画</div> <div key="2" :class="styB" v-else>two动画</div> </transition> </div> </template> <script> export default { data: function () { return { show: true, styA: "one", styB: "two", }; }, }; </script> <style lang="less" scoped> .one { width: 200px; height: 200px; background-color: red; font-size: 50px; color: white; text-align: center; line-height: 200px; } .two { width: 200px; height: 200px; background-color: blue; border-radius: 50%; font-size: 50px; color: white; text-align: center; line-height: 200px; } </style>
