【Vue】动画

本文笔记基于「千古壹号」的GitHub项目：https://github.com/qianguyihao/web
非商业用途自由转载，保持署名，注明出处！

---

1.基础

• 动画主要分进入和离开两个阶段，每个阶段又存在3个状态，比如刚进入，进入过程，进入结束。需要结合CSS的内容。
• 基本的设置淡入淡出的效果。首先，在css中进行设置，刚进入和离开结束的代码如下：

1.1 过渡

 .v-enter,
 .v-leave-to {
           opacity: 0;
        }

• 进入和离开的持续过程为：（过渡：所有目标 持续时间1秒 缓动）

.v-enter-active,
  .v-leave-active {
            transition: all 1s ease;
        }

• 在输入文本框的时候设置点击时内容为“flag=!flag”,则M中的flag设置为false，默认隐藏。方法一栏空着。
• 关键设置一个过渡（transition）双标签，内容为：

  <h3 v-if="flag">这是一个H3</h3>

1.2 位移

• 在刚进入和刚离开的css设置中添加位移属性：

transform: translateX(80px); 

• 补充：修改自定义类名，只需要在html中的过渡标签中添加类名前缀，如name=“my”,则对应的css代码类名可以写成如“.my-enter”

2.动画

• animate.css官网下载：https://raw.github.com/daneden/animate.css/master/animate.css
  （只需要点击后该链接，复制到文本文档，修改文件名为animate.css即可）
• 需要在过渡标签中设置进入和离开过程中的动画效果，如：

 <transition enter-active-class="animated bounceIn" leave-active-class="animated bounceOut">

• 若想设置持续时间，则可以在过渡标签中添加如下代码：

:duration="500"

或者：

:duration="{ enter: 1000, leave: 300 }"

• 应用：添加购物车效果，列表增删效果，详细代码在「千古壹号」的GitHub项目，开头已给出。

---

如有不当之处，欢迎指正!
谢谢！