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钩子：
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script>
<div id="example-4">
<button @click="show = !show">
Toggle
</button>
<transition
v-on:before-enter="beforeEnter"
v-on:enter="enter"
v-on:leave="leave"
v-bind:css="false"
>
<p v-if="show">
Demo
</p>
</transition>
</div> new Vue({
el: '#example-4',
data: {
show: false
},
methods: {
beforeEnter: function (el) {
el.style.opacity =
el.style.transformOrigin = 'left'
},
enter: function (el, done) {//enter,leave函数中done是必须的
Velocity(el, { opacity: , fontSize: '1.4em' }, { duration: })
Velocity(el, { fontSize: '1em' }, { complete: done })
},
leave: function (el, done) {
Velocity(el, { translateX: '15px', rotateZ: '50deg' }, { duration: })
Velocity(el, { rotateZ: '100deg' }, { loop: })
Velocity(el, {
rotateZ: '45deg',
translateY: '30px',
translateX: '30px',
opacity:
}, { complete: done })
}
}
})
初始节点过渡：
//可以通过 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 v-bind:key="isEditing">
{{ isEditing ? 'Save' : 'Edit' }}
</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;
}
FLIP 过渡的元素不能设置为 display: inline
动态过渡：
<transition v-bind:name="transitionName">
<!-- ... -->
</transition>
状态过渡：通过观察者我们能监听到任何数值属性的数值更新
<script src="https://cdn.jsdelivr.net/npm/tween.js@16.3.4"></script>
<div id="example-8">
<input v-model.number="firstNumber" type="number" step=""> +
<input v-model.number="secondNumber" type="number" step=""> =
{{ result }}
<p>
<animated-integer v-bind:value="firstNumber"></animated-integer> +
<animated-integer v-bind:value="secondNumber"></animated-integer> =
<animated-integer v-bind:value="result"></animated-integer>
</p>
</div> Vue.component('animated-integer', {
template: '<span>{{ tweeningValue }}</span>',
props: {
value: {
type: Number,
required: true
}
},
data: function () {
return {
tweeningValue:
}
},
watch: {
value: function (newValue, oldValue) {
this.tween(oldValue, newValue)
}
},
mounted: function () {
this.tween(, this.value)
},
methods: {
tween: function (startValue, endValue) {
var vm = this
function animate () {
if (TWEEN.update()) {
requestAnimationFrame(animate)
}
}
new TWEEN.Tween({ tweeningValue: startValue })
.to({ tweeningValue: endValue }, )
.onUpdate(function () {
vm.tweeningValue = this.tweeningValue.toFixed()
})
.start()
animate()
}
}
}) // 所有的复杂度都已经从 Vue 的主实例中移除！
new Vue({
el: '#example-8',
data: {
firstNumber: ,
secondNumber:
},
computed: {
result: function () {
return this.firstNumber + this.secondNumber
}
}
})