Vue笔记：动画效果

动画效果

• 利用 v-bind 给元素添加不同的类名，这些类名是提前写好的动画，以此来达到动画效果
• 利用transition标签包裹住需要产生动画效果的标签
• transition中的子元素需要有v-show或者v-if来控制是否显示
• transition标签里的name属性决定使用那一个动画效果

例子

1. 先定义动画效果

  .fade-enter-active {
    transition: all ease 2s;
  }

  .fade-enter {
    opacity: 0;
  }

  .fade-enter-to {
    opacity: 1;
  }

  .fade-leave-active {
    transition: all ease 2s;
  }

  .fade-leave {
    opacity: 1;
  }

  .fade-leave-to {
    opacity: 0;
  }

• 这是Vue的规定，格式必须是这样
• 动画效果名-enter-active
• 动画效果名-enter
• 动画效果名-enter-to

 <div id="app">
   <h1>动画</h1>
   <button @click='flag=!flag'>切换</button></button>
   <br />
   <transition name='fade'>
     <img src="./下载.jpg" width="160" v-if='flag'>
   </transition>
 </div>

const app = new Vue({
  el: "#app",
  data: {
    flag: { flag: true }
  },
})

• 点击按钮显示动画效果
• 看一下页面效果
  
  

动画类名

类名-enter:

• 定义进入过渡的开始状态。在元素被插入时生效，在下一个帧移除。

类名-enter-active:

• 定义进入过渡的结束状态。在元素被插入时生效，在transition/animation完成之后移除。

类名-leave:

• 定义离开过渡的开始状态。在离开过渡被触发时生效，在下一个帧移除。

类名-leave-active:

• 定义离开过渡的结束状态。在离开过渡被触发时生效，在transition/animation完成之后移除。

进入的过程

• 类名-enter-active
• -enter-to
• -enter

离开的过程

• 类名-leave-active
• -leave-to
• -leave

移动时出现效果

• -move

知道了动画的原理之后，上面那一大串的CSS效果就可以写成帧动画的形式

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes fadeout {
  from { opacity: 1; }
  to { opacity: 0; }
}

.fade-enter-active {
  animation: fadeIn ease 2s;
}
.fade-leave-active {
  animation: fadeOut ease 2s
}

多个元素过渡

• 其实是给里面的标签添加了 v-if 和 v-else
• 让内部的标签实现互斥效果，实现一个标签出现，另一个标签消失的效果（也只能时互斥效果）
• 无法实现所有的子元素同时显示和消失

<div id="app">
  <transition name="fade">
    <h1 v-if="isShow">哈哈哈哈</h1>
    <h1 v-else>呵呵呵</h1>
  </transition>
  <button @click='isShow=!isShow'>按钮</button>
</div>

• 此时因为diff算法的存在，动画并没有出现，因为在进行标签替换的时候，发现这俩标签一样没有变，也就是这个dom根本就没变，vue没有重新创建一个新的dom，所以没有动画效果
• 当有相同标签名的元素切换时，需要通过key特性设置唯-的值来标记以让 Vue区分它们,否则Vue为了效率只会替换相同标签内部的内容。

组件过渡

• 其实就是用transition标签把 component 标签包起来

<transition  name="动画效果名">
  <component is="组件名"></compoment>
</transiton>

列表过渡

• transition-group 不同于transition,它会以一个真实元素呈现:默认为一个span.
• 可以通过tag特性更换为其他元素。
• 必须为子元素添加不同的key值

<transition-group tag='ul' name="动画效果名">
  <li v-for='(item,index) in 数据' key='index'>{{item}}</li>
</transition-group>

• 这样做的话，当运行消失的动画效果时，永远是从最后一个删除
• 因为diff算法认为少的永远是最后一个,也就是key值不要设置为数字

使用动画插件

• 先引入插件，比如animate

 <link rel="stylesheet" href="./animate.min.css">

• 使用插件

<transition enter-active-class='rollIn animated' leave-active-class='hinge animated'>
  <img src="./下载.jpg" width="160" v-if='flag'>
</transition>

• 查看效果