标签：nts 切换 function ext 检测 1.5 put 笔记 csharp
1.使用限制
Vue 提供了 transition 的封装组件，在下列情形中，可以给任何元素和组件添加 entering/leaving 过渡
条件渲染 (使用 v-if)
条件展示 (使用 v-show)
动态组件
组件根节点
2.示例
<template>
<div id="app">
<button @click="show = !show">单击我</button>
<transition name="fade">
<p v-if="show">Hello</p>
</transition>
</div>
</template>
<script>
import Child from ‘@/components/Child‘
export default {
name: ‘app‘,
components: {Child},
data () {
return {
show: true
}
}
}
</script>
<style lang="less">
.fade-enter-active, .fade-leave-active {
transition: opacity .5s
}
.fade-enter, .fade-leave-to /* .fade-leave-active in below version 2.1.8 */ {
opacity: 0
}
</style>
3.当插入或删除包含在 transition 组件中的元素时，Vue 将会做以下处理：
a.自动嗅探目标元素是否应用了 CSS 过渡或动画，如果是，在恰当的时机添加/删除 CSS 类名。
b.如果过渡组件提供了 JavaScript 钩子函数，这些钩子函数将在恰当的时机被调用。
c.如果没有找到 JavaScript 钩子并且也没有检测到 CSS 过渡/动画，DOM 操作 (插入/删除) 在下一帧中立即执行。(注意：此指浏览器逐帧动画机制，和 Vue 的 nextTick 概念不同)
4.在进入/离开的过渡中，会有 6 个 class 切换
a.v-enter：定义进入过渡的开始状态。在元素被插入时生效，在下一个帧移除。
b.v-enter-active：定义过渡的状态。在元素整个过渡过程中作用，在元素被插入时生效，在 transition/animation 完成之后移除。这个类可以被用来定义过渡的过程时间，延迟和曲线函数。
c.v-enter-to: 2.1.8版及以上 定义进入过渡的结束状态。在元素被插入一帧后生效 (于此同时 v-enter 被删除)，在 transition/animation 完成之后移除。
d.v-leave: 定义离开过渡的开始状态。在离开过渡被触发时生效，在下一个帧移除。
e.v-leave-active：定义过渡的状态。在元素整个过渡过程中作用，在离开过渡被触发后立即生效，在 f.transition/animation 完成之后移除。这个类可以被用来定义过渡的过程时间，延迟和曲线函数。
h.v-leave-to: 2.1.8版及以上 定义离开过渡的结束状态。在离开过渡被触发一帧后生效 (于此同时 v-leave 被删除)，在 transition/animation 完成之后移除。
ps:
对于这些在 enter/leave 过渡中切换的类名，v- 是这些类名的前缀。使用 <transition name="my-transition"> 可以重置前缀，比如 v-enter 替换为 my-transition-enter。
5.css过渡
常用的过渡都是使用 CSS 过渡。
代码示例:
<template>
<div id="app">
<button @click="show = !show">单击我</button>
<transition name="slide-fade">
<p v-if="show">Hello</p>
</transition>
</div>
</template>
<script>
import Child from ‘@/components/Child‘
export default {
name: ‘app‘,
components: {Child},
data () {
return {
show: true
}
}
}
</script>
<style lang="less">
.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-to
/* .slide-fade-leave-active for below version 2.1.8 */ {
transform: translateX(10px);
opacity: 0;
}
</style>
6.css动画
CSS 动画用法同 CSS 过渡，区别是在动画中 v-enter 类名在节点插入 DOM 后不会立即删除，而是在 animationend 事件触发时删除
示例代码:
<template>
<div id="app">
<button @click="show = !show">单击我</button>
<transition name="bounce">
<p v-if="show">Hello</p>
</transition>
</div>
</template>
<script>
import Child from ‘@/components/Child‘
export default {
name: ‘app‘,
components: {Child},
data () {
return {
show: true
}
}
}
</script>
<style lang="less">
.bounce-enter-active {
animation: bounce-in .5s;
}
.bounce-leave-active {
animation: bounce-in .5s reverse;
}
@keyframes bounce-in {
0% {
transform: scale(0);
}
50% {
transform: scale(1.5);
}
100% {
transform: scale(1);
}
}
</style>
7.自定义过渡的类名
enter-class
enter-active-class
enter-to-class (2.1.8+)
leave-class
leave-active-class
leave-to-class (2.1.8+)
他们的优先级高于普通的类名，这对于 Vue 的过渡系统和其他第三方 CSS 动画库，如 Animate.css 结合使用十分有用。
8.显性设置过渡时间
<transition :duration="{ enter: 500, leave: 800 }">...</transition>
9.JavaScript 钩子
<transition
v-on:before-enter="beforeEnter"
v-on:enter="enter"
v-on:after-enter="afterEnter"
v-on:enter-cancelled="enterCancelled"
v-on:before-leave="beforeLeave"
v-on:leave="leave"
v-on:after-leave="afterLeave"
v-on:leave-cancelled="leaveCancelled"
>
<!-- ... -->
</transition>
// ...
methods: {
// --------
// 进入中
// --------
beforeEnter: function (el) {
// ...
},
// 此回调函数是可选项的设置
// 与 CSS 结合时使用
enter: function (el, done) {
// ...
done()
},
afterEnter: function (el) {
// ...
},
enterCancelled: function (el) {
// ...
},
// --------
// 离开时
// --------
beforeLeave: function (el) {
// ...
},
// 此回调函数是可选项的设置
// 与 CSS 结合时使用
leave: function (el, done) {
// ...
done()
},
afterLeave: function (el) {
// ...
},
// leaveCancelled 只用于 v-show 中
leaveCancelled: function (el) {
// ...
}
}
ps:
当只用 JavaScript 过渡的时候， 在 enter 和 leave 中，回调函数 done 是必须的 。否则，它们会被同步调用，过渡会立即完成。
10.初始渲染的过渡
默认情形下对于第一次加载,不使用过渡或动画,要改变这一点,可以附加appear特性
<transition appear> <!-- ... --> </transition>
appear也可以自定义css类名和自定义javascript钩子
11.多元素过渡
示例:
<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>
computed: {
buttonMessage: function () {
switch (this.docState) {
case ‘saved‘: return ‘Edit‘
case ‘edited‘: return ‘Save‘
case ‘editing‘: return ‘Cancel‘
}
}
}
完整代码:
<template>
<div id="app">
<transition name="bounce">
<button v-bind:key="docState" @click="onClick">
{{ buttonMessage }}
</button>
</transition>
</div>
</template>
<script>
export default {
name: ‘app‘,
data () {
return {
docState: ‘edited‘
}
},
methods: {
onClick () {
switch (this.docState) {
case ‘saved‘:
this.docState = ‘edited‘
break
case ‘edited‘:
this.docState = ‘saved‘
break
}
}
},
computed: {
buttonMessage: function () {
switch (this.docState) {
case ‘saved‘: return ‘Edit‘
case ‘edited‘: return ‘Save‘
case ‘editing‘: return ‘Cancel‘
}
}
}
}
</script>
<style lang="less">
.bounce-enter-active {
animation: bounce-in .5s;
}
.bounce-leave-active {
animation: bounce-in .5s reverse;
}
@keyframes bounce-in {
0% {
transform: scale(0);
}
50% {
transform: scale(1.5);
}
100% {
transform: scale(1);
}
}
</style>
12.过渡模式
同时生效的进入和离开的过渡不能满足所有要求，所以 Vue 提供了 过渡模
in-out：新元素先进行过渡，完成之后当前元素过渡离开。(新元素入完成后,当前元素出)
out-in：当前元素先进行过渡，完成之后新元素过渡进入(当前元素出完成后,新元素入)
示例代码:
<template>
<div id="app">
<transition name="fade" mode="out-in">
<button v-bind:key="docState" @click="onClick">
{{ buttonMessage }}
</button>
</transition>
</div>
</template>
<script>
export default {
name: ‘app‘,
data () {
return {
docState: ‘edited‘
}
},
methods: {
onClick () {
switch (this.docState) {
case ‘saved‘:
this.docState = ‘edited‘
break
case ‘edited‘:
this.docState = ‘saved‘
break
}
}
},
computed: {
buttonMessage: function () {
switch (this.docState) {
case ‘saved‘: return ‘Edit‘
case ‘edited‘: return ‘Save‘
case ‘editing‘: return ‘Cancel‘
}
}
}
}
</script>
<style lang="less">
.fade-enter-active, .fade-leave-active {
transition: opacity .5s
}
.fade-enter, .fade-leave-to /* .fade-leave-active in below version 2.1.8 */ {
opacity: 0
}
</style>
13.多个组件过渡
<transition name="component-fade" mode="out-in"> <component v-bind:is="view"></component> </transition>
更多详细可参考:
https://cn.vuejs.org/v2/guide/transitions.html
标签：nts 切换 function ext 检测 1.5 put 笔记 csharp
原文地址：http://www.cnblogs.com/itfenqing/p/7534547.html
