Vue过渡 动画

一、过渡就是在进场或退场时也就是触发过渡时 去设定transition属性

v-enter-from v-enter-to其实就是为了设定过渡的初末状态

原生触发过渡比如:hover 里面就需要写末时期的元素状态

HTML

    <transition>
      <p v-if="show">hello</p>
    </transition>
    <button @click="handleClick">显示与隐藏</button>

CSS

.v-enter {
  transform: translateY(100px);
}
.v-enter-active {
  transition: all 1s;
}
.v-enter-to {
  transform: translateY(0px);
}

Methods

methods:{
   handleClick () {
     this.show = !this.show
   }
},
data(){
  return {
    show: true
  }
}

二、动画就是很多时间帧都在动画里写好了 就不需要初末状态

所以当然不要from to 了

只需要在active里面规定是哪个动画就行了

@keyframes move {
  0% {
    transform: translateX(100px);
  }
  50% {
    transform: translateX(50px);
  }
  100% {
    transform: translateX(0px);
  }
}

.v-enter-active {
  animation: move 1s ease;
}

三、一些特性

1、type属性就是当动画 过渡 时间不一致的时候 谁等谁的问题

type设置为transition就是 就算动画结束了 但是最后一帧那里停着

等过渡执行完 再一起结束

2、如果组件一渲染就要运用过渡或者动画 就加 appear属性

3、transition标签没加name属性指定名字 那写css就用前缀v，加了就用name

4、可以在transition标签上直接写 enter-class="xxx" enter-active-class=''xxx''，来指定效果类，结合第三方库使用最佳

5、组件过渡用动态组件实现 component标签的 is属性动态绑定

    <transition enter-active-class="animate__animated animate__backInRight">
      <component :is='view'></component>
    </transition>

6、多个元素或组件过渡要用 transition-group

    <transition-group>
      <span v-for="item in nums" :key="item">{{item}}</span>
    </transition-group>
    <button @click="increment">++++</button>
    <button @click="decrement">----</button>

7、通过v-move去控制不过渡元素的平滑移动效果

8、通过 in-out 或者 out-in 控制交错顺序

9、.....还有别的细节、