vue-9-动画

小程序：扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序

transition:

<div id="demo">
<button v-on:click="show = !show">
Toggle
</button>
<transition name="fade">
<p v-if="show">hello</p>
</transition>
</div>默认样式名：enter,enter-active,enter-to, leave,leave-active,leave-to

.fade-enter-active, .fade-leave-active {
transition: opacity .5s
}
.fade-enter, .fade-leave-to {
opacity:
}

//使用animation:.fade-enter-active {
animation: bounce-in .5s;
}
.fade-leave-active {
animation: bounce-in .5s reverse;
}
@keyframes bounce-in {
% {
transform: scale();
}
% {
transform: scale(1.5);
}
% {
transform: scale();
}
}

自定义样式名：<link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css">
<div id="example-3">
<button @click="show = !show">
Toggle render
</button>
<transition
name="custom-classes-transition"
enter-active-class="animated tada"
leave-active-class="animated bounceOutRight"
>
<p v-if="show">hello</p>
</transition>
</div>

使用 type特性可以设置 animation 或 transition 需要 Vue 监听的类型

动画的持续时间：
<transition :duration="{ enter: 500, leave: 800 }">...</transition>

js钩子：

初始节点过渡：

//可以通过 appear 特性设置节点的在初始渲染的过渡
<transition
appear
appear-class="custom-appear-class"
appear-to-class="custom-appear-to-class" (2.1.+)
appear-active-class="custom-appear-active-class"
>

</transition>

<transition

appear

v-on:before-appear="customBeforeAppearHook"

v-on:appear="customAppearHook"

v-on:after-appear="customAfterAppearHook"

v-on:appear-cancelled="customAppearCancelledHook"

</transition>

多个元素过渡：

<transition>

</button>

</transition>

过渡模式：

in-out：新元素先进行过渡，完成之后当前元素过渡离开。
out-in：当前元素先进行过渡，完成之后新元素过渡进入。

多个组件的过渡：只需要用动态组件，不必设key

<transition name="component-fade" mode="out-in">
<component v-bind:is="view"></component>
</transition>new Vue({
el: '#transition-components-demo',
data: {
view: 'v-a'
},
components: {
'v-a': {
template: '<div>Component A</div>'
},
'v-b': {
template: '<div>Component B</div>'
}
}
})

.component-fade-enter-active, .component-fade-leave-active {
transition: opacity .3s ease;
}
.component-fade-enter, .component-fade-leave-to
/* .component-fade-leave-active for below version 2.1.8 */ {
opacity: ;
}

列表过渡：<transition-group>，它会以一个真实元素呈现：默认为一个 `<span>，`也可以通过 `tag` 特性更换为其他元素。

<div id="list-demo" class="demo">
<button v-on:click="add">Add</button>
<button v-on:click="remove">Remove</button>
<transition-group name="list" tag="p">
<span v-for="item in items" v-bind:key="item" class="list-item">
{{ item }}
</span>
</transition-group>
</div>

.list-enter-active, .list-leave-active {
transition: all 1s;
}
.list-enter, .list-leave-to
/* .list-leave-active for below version 2.1.8 */ {
opacity: ;
transform: translateY(30px);
}

列表的排序过渡：
<div id="flip-list-demo" class="demo">
<button v-on:click="shuffle">Shuffle</button>
<transition-group name="flip-list" tag="ul">
<li v-for="item in items" v-bind:key="item">
{{ item }}
</li>
</transition-group>
</div>.flip-list-move {
transition: transform 1s;
}