vue 项目 使用- animation.css

1.前言

最近在看这个 animation.css

1. 版本更新的一些问题 ,就是 3X 和4x的一些问题
2. 本地引用都好说
3. 项目使用的 写法还不太一样
4. 所有就简单总结下

---

2. anmiation.css 准备

安装

npm install animate.css --save

这里默认安装的是最新的 4x 版本

引入

main.js

import animated from "animate.css";
Vue.use(animated)

---

3. 常规用法

幸会

.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 使用第一种方式

    显示/隐藏


        
animate动画

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_ 都不能省略

    显示/隐藏


            
2-2
        

---

6. 多个动画

---

参考资料

animation.css

---

初心

我所有的文章都只是基于入门，初步的了解；是自己的知识体系梳理;

如果能帮助到有缘人,非常的荣幸,一切为了部落的崛起;

共勉