vue-9-動畫
阿新 • • 發佈:2017-10-03
star done tar ati .net frame true led complete 列表過渡:<transition-group>,它會以一個真實元素呈現:默認為一個
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: 0 }
//使用animation: .fade-enter-active { animation: bounce-in .5s; } .fade-leave-active { animation: bounce-in .5s reverse; } @keyframes bounce-in { 0% { transform: scale(0); } 50% { transform: scale(1.5); } 100% { transform: scale(1); } }
自定義樣式名: <link href="https://cdn.jsdelivr.net/npm/[email protected]" 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 = 0 el.style.transformOrigin = ‘left‘ }, enter: function (el, done) {//enter,leave函數中done是必須的 Velocity(el, { opacity: 1, fontSize: ‘1.4em‘ }, { duration: 300 }) Velocity(el, { fontSize: ‘1em‘ }, { complete: done }) }, leave: function (el, done) { Velocity(el, { translateX: ‘15px‘, rotateZ: ‘50deg‘ }, { duration: 600 }) Velocity(el, { rotateZ: ‘100deg‘ }, { loop: 2 }) Velocity(el, { rotateZ: ‘45deg‘, translateY: ‘30px‘, translateX: ‘30px‘, opacity: 0 }, { complete: done }) } } })
初始節點過渡:
//可以通過 appear 特性設置節點的在初始渲染的過渡 <transition appear appear-class="custom-appear-class" appear-to-class="custom-appear-to-class" (2.1.8+) 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: 0; }
列表過渡:<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: 0; 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/[email protected]"></script> <div id="example-8"> <input v-model.number="firstNumber" type="number" step="20"> + <input v-model.number="secondNumber" type="number" step="20"> = {{ 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: 0 } }, watch: { value: function (newValue, oldValue) { this.tween(oldValue, newValue) } }, mounted: function () { this.tween(0, 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 }, 500) .onUpdate(function () { vm.tweeningValue = this.tweeningValue.toFixed(0) }) .start() animate() } } }) // 所有的復雜度都已經從 Vue 的主實例中移除! new Vue({ el: ‘#example-8‘, data: { firstNumber: 20, secondNumber: 40 }, computed: { result: function () { return this.firstNumber + this.secondNumber } } })
vue-9-動畫