在vue当中使用动画

1.1. 认识Vue的动画

• 1. 认识动画：
  • 1.1. 在开发中，想要给一个组件的显示和小时添加某种过渡动画，可以增加用户体验：
    • 1.1.1. React框架本身没有提供给任何动画相关API，所以在React中使用过渡动画需要使用第三方库：react-transition-group
    • 1.1.2. Vue中提供了内阻组件和对应的API来完成动画，可以方便的实现过渡动画效果；
    • 1.1.3. 单元素或者组件实现过渡动画，可以使用transition内置组件来完成动画
  • 1.2. 自己手动做动画的话, 比较麻烦
    • 1.2.1. 需要自己写动画相关的类： 类里面有相关动画属性以及要执行的动画
    • 1.2.2. 当点击按钮时需要在恰当的时机把恰当的类名添加到元素上
    • 1.2.3. 例如：

        opacity: 0;opacity: 1;transition: opacitye 1s  ease;<!-- 默认情况下是0，不能一开始是1，如果一开始是1的话是不会产生动画效果的，需要过渡的过程 --><!-- 自己手动来管理动画相关的类是非常麻烦的，所以Vue提供了transition内置组件 -->
      

  • 1.3. transition组件可添加的元素和组件
    • 条件渲染(v-if)条件展示(使用v-show也可)
    • 动态组件

      <!-- 动态组件切换的过程中也可以有动画 -->
      <!-- componentName: home -> about -->
      <component :is='componentName'></component>
      

    • 组件根节点

        <template><!-- 动画类名添加到home组件的根节点 --><home />  </template>
      

1.2. 动画中常见类的作用

• 1.2. transition组件的主要作用是：
  • 1.2.1. 不是帮你做动画，而是管理动画相关的类名(恰当时机添加恰当的类名)
  • 1.2.2. 添加类名：
    • 进入动画类名：
      • v-enter-from：进入动画的开始状态
      • v-enter-active：进入动画的过程中(进入过渡动画生效时状态)
        - v-enter-to：进入的终点(进入过渡动画的结束状态)
    • 离开动画类名：
      • v-leave-form：离开动画的开始状态
      • v-leave-active：离开过程中(离开过渡动画生效时状态),
      • v-leave-to：离开的终点(离开过渡动画的结束状态)
        
  • 1.2.3. class命名规则
    • 没有name的transition，所有的class是以v-作为默认前缀；
    • 有name属性，例如，所有的class是以fade-作为前缀；

1.3. animation动画实现

• 1. Vue动画的原理：
  • 1.1. 不是在帮你做动画，而是在管理动画相关的类名，根据类名来执行动画(在恰当时机添加恰当的类名)
  • 1.2. 插入或删除包含在transition组件中元素实，Vue将会做以下处理：
    • 自动嗅探目标元素是否应用了css过渡或者动画，如果有，在恰当时机添加/删除css类名；
    • transition组件提供了javaScript钩子函数，这些钩子函数将在恰当的时机被调用；
    • 如果没有找到javaScript钩子并且有没有检测到css过渡或者动画，DOM插入、删除将会立即执行。
• 2. 同时设置过渡和动画(一般不设置)
  • Vue为了知道过渡的完成，内部是在监听transition或animation, 到底使用哪个取决于元素应用的css规则：
    • 只是使用了其中一个，Vue内部能自动识别类型并设置监听
  • 如果同时使用了过渡和动画
    • 并且在这个情况下可能某一个动画执行结束时，另外一个动画还没结束；
    • 在这种情况下，可以设置type属性为animation或transition来明确的告知Vue监听的类型；

      <template><div class="App"><div><button @click="isShow = !isShow">切换</button></div><transition name='why' type="transition"><h2 v-if="isShow">对于生死的拷问，追寻活着的终极意义以及关怀残缺的灵魂是贯穿史铁生散文的主线。身体上的残疾带来心理的苦闷，这种苦闷却引导他思考个人乃至全人类的遭遇和命运。“一个人，出生了，这就不再是一个可以辩论的问题，而只是上帝交给他的一个事实；上帝在交给我们这件事实的时候，已经顺便保证了它的结果，所以死是一件不必急于求成的事，死是一个必然会降临的节日。”所以生死在史铁生看来，是一件顺其自然的事，不必急于求成，也无需执着，只需要等待这个节日的降临，而剩下的就是怎么活的问题了。</h2></transition></div></template><script setup>import { ref } from 'vue'const isShow = ref(false)</script><style  scoped>h2 {display: inline-block;}.why-enter-from,.why-leave-to {opacity: 0;}.why-enter-to,.why-leave-from {opacity: 1;}.why-enter-active {animation: whyAnim 2s ease;transition: all 2s ease;}.why-leave-active {animation: whyAnim 2s ease reverse;transition: all 2s ease;}@keyframes whyAnim {0% {transform: scale(0);}50% {transform: scale(1.2);}100% {transform: scale(1);}}</style>
    

• 3. 显示指定动画时间
  • 可以显示的来指定过渡的时间，通过duration属性
  • duration可以设置两种类型的值：
    • number类型： 同时社子和进入和离开的过渡时间；
    • object类型：分别设置进入和离开的过渡时间
    • 代码如下；

        <template><div class="App"><div><button @click="isShow = !isShow">切换</button></div><!--  :duration="1000" --><transition name='why' type="transition" :duration="{ enter: 800, leave: 1000 }"><h2 v-if="isShow">对于生死的拷问，追寻活着的终极意义以及关怀残缺的灵魂是贯穿史铁生散文的主线。身体上的残疾带来心理的苦闷，这种苦闷却引导他思考个人乃至全人类的遭遇和命运。“一个人，出生了，这就不再是一个可以辩论的问题，而只是上帝交给他的一个事实；上帝在交给我们这件事实的时候，已经顺便保证了它的结果，所以死是一件不必急于求成的事，死是一个必然会降临的节日。”所以生死在史铁生看来，是一件顺其自然的事，不必急于求成，也无需执着，只需要等待这个节日的降临，而剩下的就是怎么活的问题了。</h2></transition></div></template><script setup>import { ref } from 'vue'const isShow = ref(false)</script><style  scoped>h2 {display: inline-block;}.why-enter-from,.why-leave-to {opacity: 0;}.why-enter-to,.why-leave-from {opacity: 1;}.why-enter-active {animation: whyAnim 2s ease;transition: all 2s ease;}.why-leave-active {animation: whyAnim 2s ease reverse;transition: all 2s ease;}@keyframes whyAnim {0% {transform: scale(0);}50% {transform: scale(1.2);}100% {transform: scale(1);}}</style>
      

1.4. 动画常见的属性设置

• 1. mode属性(过渡的模式)
  • 默认情况下进入和离开动画时同时发生的，如果不希望同时执行进入和离开动画，可以设置transition的过渡模式
    • in-out: 新元素先进入，完成之后当前元素过渡离开；
    • out-in: 当前元素先进行过渡，完成之后新元素过渡进入；
• 2. appear属性
  • 组件首次渲染时触发动画效果‌

1.5. 列表元素动画组设置

• 1. 过渡动画针对单个元素或者组件：
  • 要么时单个节点
  • 那么时同一时间渲染多个节点中的一个
• 2. 列表中添加删除数据也执行动画
  • 使用<transition-group>组件来完成

1.6. 列表元素的移动动画(列表过渡的移动动画)

• 新增和删除节点通过<transition-group>是有动画的，其他需要移动的节点是没有动画的
  • 新增的v-model的class来完成动画；
  • 会在元素改变位置的过程中应用

1.7. 示例代码如下：

• 添加数字示例图如下：
  
• 删除数字示例图如下：
  
• 打乱数字示例图如下：
  

<template><div class="App"><button @click="addNumber">添加数字</button><button @click="removeNumber">删除数字</button><button @click="shuffleNumber">打乱数字</button><transition-group tag="div"><template v-for="item in nums" :key="item"><span>{{ item }}</span></template></transition-group></div>
</template><script setup>
import { ref } from 'vue';
import { shuffle } from 'underscore'const nums = ref([0,1,2,3,4,5,6,7,8,9])const addNumber = () => {nums.value.splice(randomIndex(), 0, nums.value.length)
}const removeNumber = () => {nums.value.splice(randomIndex(), 1)
}const shuffleNumber = () => {nums.value = shuffle(nums.value)
}const randomIndex = () => {return Math.floor(Math.random() * nums.value.length)
}
</script><style  scoped>
span {margin-right: 10px;display: inline-block;
}.v-enter-from,
.v-leave-to {opacity: 0;transform: translateY(30px);
}.v-enter-to,
.v-leave-from {opacity: 1;transform: translateY(0px);
}.v-enter-active,
.v-leave-active  {transition: all 2s ease;
}/* 移动动画时元素依旧占位所以使用绝对定位使元素不占位 */
.v-leave-active {position: absolute;
}/* 针对其他移动的阶段需要的动画 */
.v-move {transition: all 2s ease;
}
</style>