Vue——关于css过渡和动画

1. 单元素/组件的过渡transition
   Vue 提供了 transition 的封装组件，在下列情形中，可以给任何元素和组件添加进入/离开过渡

• 条件渲染 (使用 v-if)
• 条件展示 (使用 v-show)
• 动态组件
• 组件根节点

2. 过渡的类名

在进入/离开的过渡中，会有 6 个 class 切换：v-enter 、v-enter-active、v-enter-to、v-leave、v-leave-active、v-leave-to

关于过渡类名：

如果你使用一个没有名字的 ，则 v-是这些类名的默认前缀。

如果你使用了 ，那么 v-enter 会替换为 my-transition-enter

js:

<div class="cirIcHand">
  <transition v-if="wasteal" name="cirIcHands">
    <div>
       <span>-6</span>
    </div>
  </transition>
</div>
<input type="button" value="点击我显示/取消" @click="wasteal=!wasteal">

data:

  data() {
    return {
      wasteal: false,
    };
  },

css:

.cirIcHand .cirIcHands-enter {
  opacity: 0;
  transform: translateY(40px);
}

.cirIcHand .cirIcHands-leave-to {
  opacity: 0;
  transform: translateY(-40px);
}

.cirIcHand .cirIcHands-enter-active,
.cirIcHand .cirIcHands-leave-active {
  transition: all 0.5s ease;
}

3. 如何在页面加载完成后元素第一次显示时也具备动画效果？

使用appear 和 appear-active-class

<div id="app">
    <transition 
        appear 
        enter-active-class="fade-enter-active" 
        leave-active-class="fade-leave-active"
        appear-active-class="swing">
    <div v-if="show">show</div>
    </transition>
    <input type="button" value="点击我显示/取消" @click="show=!show">
</div>