Vue transition 动画过渡
class类
- 显示 name 为自定义组件上 name
- name-enter：进入前
- name-enter-active：进入中
- name-enter：进入后
- 消失
- name-leave：消失前
- name-leave-active：消失中
- name-leave-to：消失后
vue
.name-enter,.name-leave-to{
width: 0;
}
.name-enter-active,.name-leave-active{
transition: all .3s;
}
.name-enter-to,.name-leave{
width: 100px;
}
</style>
</head>
<body>
<div id="box">
<button @click='tog'>click</button>
<transition name='name'>
<div v-show='fg'></div>
</transition>
</div>组件属性 attr-class
- enter-class：进入前
- enter-active-class：进入中
- enter-to-class：进入后
- leave-class：离开前
- leave-active-class：离开中
- leave-to-class：离开后
4.1.1 以上 animate.css，需要加 animate__animated 与 animate__ 动画名
html
<transition
enter-active-class="animate__animated animate__bounce"
leave-active-class="animate__animated animate__bounceOutRight">
\>
<div v-show='fg' class="animated"></div>
</transition>多个元素过渡
html
<transition enter-active-class="animate__animated animate__fadeInRight"
leave-active-class="animate__animated animate__fadeOutUpBig">
<div v-if='isshow' key="1"></div>
<div v-else key="2"></div>
</transition>列表过渡
tag 把外层包装为 ul 标签，默认是 span
html
<transition-group tag="ul"
enter-active-class="animate__animated animate__fadeInRight"
leave-active-class="animate__animated animate__fadeOutUpBig"
\>
<li v-for="(item,index) in items" :key="item.id" @click='del(index)'>
{{ item }}
</li>
</transition-group>过渡模式
- 在 transtion 上添加属性 mode
- in-out: 新元素先进行过渡，完成之后当前元素过渡离开。(一般不用)
- out-in: 当前元素先进行过渡，完成之后新元素过渡进入。
