为什么type="transition"开场动画就消失了

Question

切换成animation就可以

Answer 1

MRNUR 2019-07-08 17:50:44

在标签里的 appear-active-class 里面除了要写 "animated 动画名称"，再加一个 fade-enter-active 就可以

Answer 2

虚线 2018-10-01 20:33:09

transition加上type=‘transition’的原因是，transition的过渡时长可能是3s是自己定义的，但是animate默认的过渡时长为1s，所以会有冲突，type的作用是以谁的时长为总时长
当然我们也可以自己自定义时长。

<transition
    name='fade'
    appear
    :duration ="5000"
   // :duration ="{enter:5000,leave:10000}"
   // 更复杂的定义时长
    enter-active-class='animated swing fade2-enter-active'
    leave-active-class='animated flash fade2-leave-active'
    appear-active-class='animated swing'>
 <div v-if="cssanimate3">hello css animate3</div></transition>
 <button @click='cssclick3'>css动画3</button>123456789101112

如此便实现动画和过渡的效果。