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

来源:5-3 在Vue中同时使用过渡和动画

狗子开始自闭

2018-09-24

切换成animation就可以
写回答

2回答

MRNUR

2019-07-08

在标签里的 appear-active-class 里面除了要写 "animated 动画名称",再加一个 fade-enter-active 就可以//img.mukewang.com/szimg/5d2311d50001305308330274.jpg


1
0

虚线

2018-10-01

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

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

0
0

Vue2.5-2.6-3.0开发去哪儿网App 零基础入门到实战

课程紧跟Vue3版本迭代,企业主流版本Vue2+Vue3全掌握

10675 学习 · 8191 问题

查看课程