Vue Transition

Developer
Kevin
Size
4,561 Kb
Views
64,768
  1. Vue Transition Previews
  2. Vue Transition HTML Codes
  3. Vue Transition CSS Codes
  4. Vue Transition JS Codes

How do I make an vue transition?

Http://www.jianshu.com/p/c66cb4ea6e4f. What is a vue transition? How do you make a vue transition? This script and codes were developed by Kevin on 04 September 2022, Sunday.

Vue Transition Previews
IQ Test

Vue Transition - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>vue Transition</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="demo1" class="demo"> <h3>1.transition组件提供进入和移除动画</h3> <button v-on:click="show =! show"> Toggle </button> <transition name="fade"> <p v-if="show">hello</p> </transition>
</div>
<img src="http://upload-images.jianshu.io/upload_images/2061490-f47ff9d8adc1ad91.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="" />
<div id="demo2" class="demo"> <h3>2.transition 进入和移除动画</h3> <button @click="show =!show"> Toggle render </button> <transition name="slide-fade"> <p v-if="show">hello</p> </transition>
</div>
<div id="demo3" class="demo"> <h3>3.CSS animations 方式相同</h3> <button @click="show = !show"> Toggle show </button> <transition name="bounce"> <p v-if="show">Look at me!</p> </transition>
</div>
<link href="https://unpkg.com/[email protected]/animate.min.css" rel="stylesheet" type="text/css"/>
<div id="demo4" class="demo"> <h3>4.transition 组件增加属性</h3> <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>
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script>
<div id="demo5" class="demo"> <h3>5.JavaScript hooks</h3> <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>
<div id="demo6" class="demo"> <h3>6.节点的初始渲染应用转换</h3> <!-- 添加class --> <transition appear appear-class="custom-appear-class" appear-active-class="custom-appear-active-class"> </transition> <!-- JavaScript钩子函数 --> <transition appear v-on:before-appear="customBeforeAppearHook" v-on:appear="customAppearHook" v-on:after-appear="customAfterAppearHook"> </transition>
</div>
<div id="demo7" class="demo"> <h3>7.在不同元素之间切换动画</h3> <transition> <table v-if="items.length > 0"> </table> <p v-else>Sorry, no items found.</p> </transition> <!-- 注意：如果是相同元素，比如都是table，需要绑定key --> <transition> <button v-if="docState === 'saved'" key="saved"> Edit </button> <button v-if="docState === 'edited'" key="edited"> Save </button> <button v-if="docState === 'editing'" key="editing"> Cancel </button> </transition> <!-- 等价于 --> <transition> <button v-bind:key="docState"> {{ buttonMessage }} </button> </transition>
</div>
<div id="demo8" class="demo"> <h3>8.Transition Modes</h3> <p>in-out: New element transitions in first, then when complete, the current element transitions out.</p> <p>out-in: Current element transitions out first, then when complete, the new element transitions in</p>
</div>
<div id="demo9" class="demo"> <h3>9.Transitioning Between Components</h3> <input type="radio" v-model="view" value="v-a" name="view" />A <input type="radio" v-model="view" value="v-b" name="view" />B <transition name="component-fade" mode="out-in"> <component v-bind:is="view"></component> </transition>
</div>
<div id="demo10" class="demo list-demo"> <h3>10.transitioning entering and leaving</h3> <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>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.14.1/lodash.min.js"></script>
<div id="demo11" class="demo"> <h3>11.List Move Transitions</h3> <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>
<div id="demo12" class="demo"> <h3>12.交错转换</h3> <input v-model="query"> <transition-group name="staggered-fade" tag="ul" v-bind:css="false" v-on:before-enter="beforeEnter" v-on:enter="enter" v-on:leave="leave"> <li v-for="(item, index) in computedList" v-bind:key="item.msg" v-bind:data-index="index">{{ item.msg }}</li> </transition-group>
</div>
<div id="demo13" class="demo"> <h3>13.可以重用的动画组件</h3>
</div>
<div id="demo14" class="demo"> <h3>14.dynamic transitions</h3>
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Vue Transition - Script Codes CSS Codes

.demo { border: 1px solid #d3dede; padding: 5px 10px; margin-bottom: 20px;
}
/** demo1 **/
.fade-enter-active,.fade-leave-active { transition: opacity .5s
}
.fade-enter,.fade-leave-active { opacity: 0
}
/** demo2 **/
/* Enter and leave animations can use different */
/* durations and timing functions. */
.slide-fade-enter-active { transition: all .3s ease;
}
.slide-fade-leave-active { transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.slide-fade-enter,.slide-fade-leave-active { padding-left: 10px; opacity: 0;
}
/** demo3 **/
.bounce-enter-active { animation: bounce-in .5s;
}
.bounce-leave-active { animation: bounce-out .5s;
}
@keyframes bounce-in { 0% { transform: scale(0); } 50% { transform: scale(1.5); } 100% { transform: scale(1); }
}
@keyframes bounce-out { 0% { transform: scale(1); } 50% { transform: scale(1.5); } 100% { transform: scale(0); }
}
/** demo9 **/
.component-fade-enter-active, .component-fade-leave-active { transition: opacity .3s ease;
}
.component-fade-enter, .component-fade-leave-active { opacity: 0;
}
/** demo10 **/
.list-item { display: inline-block; margin-right: 10px;
}
.list-enter-active, .list-leave-active { transition: all 1s;
}
.list-enter, .list-leave-active { opacity: 0; transform: translateY(30px);
}
/** demo11 **/
.flip-list-move { transition: transform 1s;
}

Vue Transition - Script Codes JS Codes

new Vue({ el: '#demo1', data: { show: true }
})
new Vue({ el: '#demo2', data: { show: true }
})
new Vue({ el: '#demo3', data: { show: true }
})
new Vue({ el: '#demo4', data: { show: true }
})
new Vue({ el: '#demo5', data: { show: false }, methods: { beforeEnter: function (el) { el.style.opacity = 0 }, enter: function (el, 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 }) } }
})
new Vue({ el: '#demo7', data: { items: [], docState: 'saved' }, computed: { buttonMessage: function () { switch (this.docState) { case 'saved': return 'Edit' case 'edited': return 'Save' case 'editing': return 'Cancel' } } }
})
new Vue({ el: '#demo9', data: { view: 'v-a' }, components: { 'v-a': { template: '<div>Component A</div>' }, 'v-b': { template: '<div>Component B</div>' } }
})
new Vue({ el: '#demo10', data: { items: [1,2,3,4,5,6,7,8,9], nextNum: 10 }, methods: { randomIndex: function () { return Math.floor(Math.random() * this.items.length) }, add: function () { this.items.splice(this.randomIndex(), 0, this.nextNum++) }, remove: function () { this.items.splice(this.randomIndex(), 1) }, }
})
new Vue({ el: '#demo11', data: { items: [1,2,3,4,5,6,7,8,9] }, methods: { shuffle: function () { this.items = _.shuffle(this.items) } }
})
new Vue({ el: '#demo12', data: { query: '', list: [ { msg: 'Bruce Lee' }, { msg: 'Jackie Chan' }, { msg: 'Chuck Norris' }, { msg: 'Jet Li' }, { msg: 'Kung Fury' } ] }, computed: { computedList: function () { var vm = this return this.list.filter(function (item) { return item.msg.toLowerCase().indexOf(vm.query.toLowerCase()) !== -1 }) } }, methods: { beforeEnter: function (el) { el.style.opacity = 0 el.style.height = 0 }, enter: function (el, done) { var delay = el.dataset.index * 150 setTimeout(function () { Velocity( el, { opacity: 1, height: '1.6em' }, { complete: done } ) }, delay) }, leave: function (el, done) { var delay = el.dataset.index * 150 setTimeout(function () { Velocity( el, { opacity: 0, height: 0 }, { complete: done } ) }, delay) } }
})
/** DEMO13 **/
Vue.component('my-special-transition', { template: '\ <transition\ name="very-special-transition"\ mode="out-in"\ v-on:before-enter="beforeEnter"\ v-on:after-enter="afterEnter"\ >\ <slot></slot>\ </transition>\ ', methods: { beforeEnter: function (el) { // ... }, afterEnter: function (el) { // ... } }
})
// functional components
Vue.component('my-special-transition', { functional: true, render: function (createElement, context) { var data = { props: { name: 'very-special-transition', mode: 'out-in' }, on: { beforeEnter: function (el) { // ... }, afterEnter: function (el) { // ... } } } return createElement('transition', data, context.children) }
})
Vue Transition - Script Codes
Vue Transition - Script Codes
Home Page Home
Developer Kevin
Username chenming142
Uploaded September 04, 2022
Rating 3
Size 4,561 Kb
Views 64,768
Do you need developer help for Vue Transition?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Kevin (chenming142) Script Codes
Name
NgTouchSpin
Submitability
NgModel validation Unit
JsTag
A Pen by Kevin
Create amazing web content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!