插入，更新或從DOM中刪除項目時，Vue提供了多種應用轉換效果的方法。這包括以下工具：

• 自動為CSS轉換和動畫應用類
• 集成第三方CSS動畫庫，如Animate.css
• 使用JavaScript在轉換掛鉤期間直接操作DOM
• 整合第三方JavaScript動畫庫，例如Velocity.js

在這個頁面上，我們只會介紹進入，離開和列表轉換，但您可以看到管理狀態轉換的下一部分。

過渡單個元素/組件

Vue提供了一個transition包裝組件，允許您在以下上下文中為任何元素或組件添加進入/離開轉換：

• 有條件呈現（使用v-if）
• 有條件顯示（使用v-show）
• 動態組件
• 組件根節點

這就是一個例子：

<div id="demo">
 <button v-on:click="show = !show">
 Toggle
 </button>
 <transition name="fade">
 <p v-if="show">hello</p>
 </transition>
</div>
new Vue({
 el: '#demo',
 data: {
 show: true
 }
})
.fade-enter-active, .fade-leave-active {
 transition: opacity .5s
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
 opacity: 0
}

切換

hello

transition插入或移除組件中包含的元素時，會發生以下情況：

1. Vue會自動嗅探目標元素是否有CSS轉換或動畫應用。如果是這樣，CSS轉換類將在適當的時機添加/刪除。

2. 如果轉換組件提供了JavaScript鉤子，這些鉤子將在適當的時機調用。

3. 如果沒有檢測到CSS轉換/動畫，并且沒有提供JavaScript鉤子，插入和/或刪除的DOM操作將在下一幀立即執行（注意：這是一個瀏覽器動畫框架，與Vue的概念不同nextTick）.Transition ClassesThere有六類申請進入/離開轉換。

4. v-enter：輸入的起始狀態。插入元素之前添加，插入元素后刪除一幀。

5. v-enter-active：輸入的活動狀態。在整個進入階段應用。插入元素之前添加，當過渡/動畫完成時刪除。該類可用于定義輸入轉換的持續時間，延遲和緩動曲線。

6. v-enter-to：僅適用于版本2.1.8+。結束進入狀態。插入元素后添加一個框架（同時v-enter刪除），當轉換/動畫完成時刪除。

7. v-leave：開始狀態請假。當離開轉換被觸發時立即添加，在一幀后刪除。

8. v-leave-active：離開的活動狀態。在整個離開階段應用。當離開轉換被觸發時立即添加，當轉換/動畫結束時刪除。該類可用于定義離開轉換的持續時間，延遲和緩動曲線。

9. v-leave-to：僅適用于版本2.1.8+。結束離開狀態。加入一個幀一個離開轉換被觸發（在相同的時間之后v-leave被移除），當過渡/動畫完成除去。

這些類將與過渡的名稱為前綴。這里的v-前綴是你使用<transition>沒有名字的元素時的默認值。如果你使用<transition name="my-transition">例子，那么這個v-enter類將會是my-transition-enter。v-enter-active和v-leave-active讓您能夠為進入/離開轉換指定不同的緩動曲線，您將在下面的部分中看到一個示例.CSS轉換一種最常見的轉換類型使用CSS轉換。下面是一個例子：

<button @click="show = !show"> Toggle render </button> <transition name="slide-fade"> <p v-if="show">hello</p> </transition> </div>new Vue({ el: '#example-1', data: { show: true } })/* 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-to /* .slide-fade-leave-active below version 2.1.8 */ { transform: translateX(10px); opacity: 0; }

CSS動畫CSS動畫以與CSS轉換相同的方式應用，區別在于v-enter不是在插入元素后立即移除，而是在animationend事件中。這里是一個例子，為了簡潔起見，省略了前綴CSS規則：<div id="example-2"> <button @click="show = !show">Toggle show</button> <transition name="bounce"> <p v-if="show">Look at me!</p> </transition> </div>new Vue({ el: '#example-2', data: { show: true } }).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); } }

自定義轉換類您還可以通過提供以下屬性來指定自定義轉換類：

10. enter-class

11. enter-active-class

12. enter-to-class (2.1.8+)

13. leave-class

14. leave-active-class

15. leave-to-class (2.1.8+)

這些將覆蓋傳統的類名稱。當您想要將Vue的轉換系統與現有的CSS動畫庫（如Animate.css）結合使用時，此功能特別有用。

這是一個例子：

<link  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>
new Vue({
 el: '#example-3',
 data: {
 show: true
 }
})

一起使用轉換和動畫

Vue需要附加事件監聽器才能知道轉換何時結束。它可以是transitionend或者animationend，取決于所應用的CSS規則的類型。如果您只使用其中一種，Vue可以自動檢測正確的類型。

然而，在某些情況下，您可能希望同時擁有兩個元素，例如由Vue觸發的CSS動畫，以及懸停時的CSS過渡效果。在這些情況下，您必須在type屬性中明確聲明您想要Vue關心的類型，其值為animation或transition。

顯式過渡時間

New in 2.2.0+

在大多數情況下，Vue可以自動計算轉換完成的時間。默認情況下，Vue等待根轉換元素上的第一個transitionend或animationend事件。然而，這可能并不總是需要的 - 例如，我們可能有一個編排的轉換序列，其中一些嵌套的內部元素具有比根轉換元素延遲的轉換或更長的轉換持續時間。

在這種情況下，您可以使用組件duration上的prop 指定明確的轉換持續時間（以毫秒為單位）<transition>：

<transition :duration="1000">...</transition>

您還可以為輸入和保留持續時間指定單獨的值：

<transition :duration="{ enter: 500, leave: 800 }">...</transition>

JavaScript Hooks

你也可以在屬性中定義JavaScript hooks：

<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: {
 // --------
 // ENTERING
 // --------
 beforeEnter: function (el) {
 // ...
 },
 // the done callback is optional when
 // used in combination with CSS
 enter: function (el, done) {
 // ...
 done()
 },
 afterEnter: function (el) {
 // ...
 },
 enterCancelled: function (el) {
 // ...
 },
 // --------
 // LEAVING
 // --------
 beforeLeave: function (el) {
 // ...
 },
 // the done callback is optional when
 // used in combination with CSS
 leave: function (el, done) {
 // ...
 done()
 },
 afterLeave: function (el) {
 // ...
 },
 // leaveCancelled only available with v-show
 leaveCancelled: function (el) {
 // ...
 }
}

這些鉤子可以與CSS轉換/動畫結合使用或單獨使用。

當使用JavaScript的過渡只，將 需要為回調和鉤。否則，它們將被同步調用，并且轉換將立即結束。done enter leave

明確添加v-bind:css="false"僅用于JavaScript的轉換也是一個好主意，以便Vue可以跳過CSS檢測。這也可以防止CSS規則意外干擾轉換。

現在我們來看一個例子。這里使用了Velocity.js的JavaScript轉換：

<!--
Velocity works very much like jQuery.animate and is
a great option for JavaScript animations
-->
<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
 },
 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 })
 }
 }
})

初始渲染過渡

如果您還想在節點的初始渲染上應用轉場，則可以添加appear屬性：

<transition appear>
 <!-- ... -->
</transition>

默認情況下，這將使用為進入和離開指定的轉換。但是，如果您想要，也可以指定自定義CSS類：

<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>

和自定義JavaScript鉤：

<transition
 appear
 v-on:before-appear="customBeforeAppearHook"
 v-on:appear="customAppearHook"
 v-on:after-appear="customAfterAppearHook"
 v-on:appear-cancelled="customAppearCancelledHook"
>
 <!-- ... -->
</transition>

元素之間的過渡

我們稍后討論組件之間的轉換，但也可以使用v-if/ 在各個原始元素之間轉換v-else。最常見的兩元素轉換之一是在列表容器和描述空列表的消息之間：

<transition>
 <table v-if="items.length > 0">
 <!-- ... -->
 </table>
 <p v-else>Sorry, no items found.</p>
</transition>

這很有效，但有一點需要注意：

在具有相同標簽名稱的元素之間切換時，必須通過為Vue指定唯一key屬性來區分它們是不同的元素。否則，Vue的編譯器只會替換元素的內容以提高效率。即使在技術上沒有必要，但總是在<transition>組件內鍵入多個項目被認為是很好的做法。

例如：

<transition>
 <button v-if="isEditing" key="save">
 Save
 </button>
 <button v-else key="edit">
 Edit
 </button>
</transition>

在這些情況下，您也可以使用該key屬性在同一元素的不同狀態之間轉換。代替使用的v-if和v-else，上述例子可以被重寫為：

<transition>
 <button v-bind:key="isEditing">
 {{ isEditing ? 'Save' : 'Edit' }}
 </button>
</transition>

實際上可以在任意數量的元素之間進行轉換，可以使用多個v-ifs或將單個元素綁定到動態屬性。例如：

<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'
 }
 }
}

過渡模式

但仍然有一個問題。嘗試點擊下面的按鈕：

當它在“開啟”按鈕和“關閉”按鈕之間轉換時，兩個按鈕都被渲染 - 一個轉換出來，而另一個轉換進來。這是<transition>的默認行為- 進入和離開同時發生。

有時候，這很有效，就像轉換項目絕對位于彼此之上一樣：

然后也可能翻譯成它們看起來像幻燈片切換：

雖然同時進入和離開轉換并不總是需要，所以Vue提供了一些替代轉換模式：

• in-out：首先新元素轉換，然后完成時，當前元素轉換出來。
• out-in：當前元素首先轉換出來，然后完成后，新元素轉入。

現在讓我們用out-in更新我們開/關按鈕的轉換：

<transition name="fade" mode="out-in">
 <!-- ... the buttons ... -->
</transition>

除了一個屬性外，我們已經修復了原始轉換，而無需添加任何特殊樣式。

該in-out模式并不經常使用，但有時對于稍微不同的過渡效果有用。讓我們嘗試將它與早先我們所做的幻燈片淡化轉換相結合：

（這種方法）很酷，對吧？

組件之間的轉換

組件之間的轉換甚至更簡單 - 我們甚至不需要該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 below version 2.1.8 */ {
 opacity: 0;
}

列表轉換

到目前為止，我們已經為以下方面管理過渡：

• 個別節點
• 多個節點一次僅渲染1個節點

那么當我們有一整套我們想要同時渲染的物品時，例如v-for。在這種情況下，我們將使用該<transition-group>組件。在我們深入研究一個例子之前，有幾件重要的事情要了解這個組件：

• 與<transition>不同的是，它呈現一個實際的元素：a <span>默認情況下。您可以更改使用該tag屬性呈現的元素。
• 里面的元素始終需要具有唯一的key屬性

列表輸入/離開轉場

現在我們來看一個例子，使用我們以前使用過的相同的CSS類來轉換進入和離開：

<div id="list-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>
new Vue({
 el: '#list-demo',
 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)
 },
 }
})
.list-item {
 display: inline-block;
 margin-right: 10px;
}
.list-enter-active, .list-leave-active {
 transition: all 1s;
}
.list-enter, .list-leave-to /* .list-leave-active below version 2.1.8 */ {
 opacity: 0;
 transform: translateY(30px);
}

這個例子有一個問題。當你添加或刪除一件物品時，它周圍的物品會立即進入新位置，而不是平穩過渡。我們稍后會解決這個問題。

列表移動轉換

<transition-group>組件還有另一個竅門。它不僅可以動畫進入和離開，而且可以改變位置。您需要知道的使用此功能的唯一新概念是添加了v-move類，該類在項目更改位置時添加。像其他類一樣，它的前綴將與提供的屬性的值匹配，您也可以手動指定具有namemove-class屬性的類。

該類對于指定轉換時間和緩動曲線非常有用，如下所示：

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.14.1/lodash.min.js"></script>
<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>
new Vue({
 el: '#flip-list-demo',
 data: {
 items: [1,2,3,4,5,6,7,8,9]
 },
 methods: {
 shuffle: function () {
 this.items = _.shuffle(this.items)
 }
 }
})
.flip-list-move {
 transition: transform 1s;
}

這可能看起來很神奇，但在引擎蓋下，Vue正在使用名為FLIP的動畫技術，以使用變換平滑地將元素從舊位置過渡到新位置。

我們可以將此技術與我們之前的實現結合起來，為每個可能的變化添加動畫。

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.14.1/lodash.min.js"></script>
<div id="list-complete-demo" class="demo">
 <button v-on:click="shuffle">Shuffle</button>
 <button v-on:click="add">Add</button>
 <button v-on:click="remove">Remove</button>
 <transition-group name="list-complete" tag="p">
 <span
 v-for="item in items"
 v-bind:key="item"
 class="list-complete-item"
 >
 {{ item }}
 </span>
 </transition-group>
</div>
new Vue({
 el: '#list-complete-demo',
 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)
 },
 shuffle: function () {
 this.items = _.shuffle(this.items)
 }
 }
})
.list-complete-item {
 transition: all 1s;
 display: inline-block;
 margin-right: 10px;
}
.list-complete-enter, .list-complete-leave-to
/* .list-complete-leave-active below version 2.1.8 */ {
 opacity: 0;
 transform: translateY(30px);
}
.list-complete-leave-active {
 position: absolute;
}

一個重要的提示是，這些FLIP轉換不適用于設置為的元素display: inline。作為替代，您可以display: inline-block在Flex上下文中使用或放置元素。

這些FLIP動畫也不限于單個軸。多維網格中的項目也可以進行轉換：

交錯列表轉換

通過通過數據屬性與JavaScript轉換進行通信，也可以在列表中錯開轉換：

<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script>
<div id="staggered-list-demo">
 <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>
new Vue({
 el: '#staggered-list-demo',
 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)
 }
 }
})

可重復使用的轉換

轉換可以通過Vue的組件系統重用。要創建可重用的轉換，您只需將<transition>或<transition-group>組件放在根上，然后將所有子項傳遞給轉換組件。

以下是使用模板組件的示例：

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) {
 // ...
 }
 }
})

功能組件特別適合這項任務：

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中的轉換都是數據驅動的！動態轉換的最基本示例將該name屬性綁定到動態屬性。

<transition v-bind:name="transitionName">
 <!-- ... -->
</transition>

當您使用Vue的過渡類約定定義CSS過渡/動畫并希望在它們之間切換時，這會很有用。

實際上，任何轉換屬性都可以動態綁定。這不僅是屬性。由于事件掛鉤是方法，因此它們可以訪問上下文中的任何數據。這意味著取決于組件的狀態，JavaScript轉換可能會有不同的表現。

平時做前端開發，對于頁面切換、最小化、長時間不操作這些安全問題，其實接觸不多，除非涉及到隱秘問題，可能需要將這些實現考慮進去。這次我接到這個需求時，也是處于懵逼狀態

visibilityChange，這個在瀏覽器標簽頁被隱藏或顯示的時候都會除非該方法，看似能滿足頁面切換或最小化。但是它有個問題，就是在頁面縮放，下圖綠色標識，而非最小化時也會執行該方法。

 document.addEventListener(visibilityChange, () => {
 let screenTop = window.localStorage.getItem('screenTop');
 // 隱藏時觸發了2次
 setTimeout(() => {
 // 采用screenTop，是因為縮放時也會觸發該事件，無法區分是縮放還是最小化
 if (screenTop && screenTop == window.screenTop && document.visibilityState === hidden) {
 this.props.dispatch({
 type: 'SET_PAYROLL_STATUS',
 data: false
 })
 // window.location.href = window.location.href;
 } else {
 window.localStorage.setItem('screenTop', window.screenTop)
 }
 }, 0)
 }, false) 

上面代碼中的判斷screenTop==window.screenTop能將縮放這個排除在外，結合document.visibilityState能實現頁面切換、頁面最小化的時候修改狀態保證頁面內容安全，譬如通過設置狀態為false，不展示設計安全的內容。

而判斷長時間是否操作，主要是通過setInterval來倒計時變量count，如果有操作就將count初始化，從新倒計時。

hasOperate = (callback, second) => { 
 let count = 0;
 const countTime = () => {
 timer = setInterval(() => {
 if (document.visibilityState === 'hidden') {
 count = 0;
 // clearInterval(timer);
 }
 count++;
 if (count == second) {
 callback();
 clearInterval(timer);
 count=0
 }
 }, 1000);
 }

 let x;
 let y;

 document.addEventListener('mousemove', () => {
 let x1 = event.clientX;
 let y1 = event.clientY;
 if (x != x1 || y != y1) {
 count = 0;
 }
 x = x1;
 y = y1;
 })

 document.addEventListener('keydown', () => {
 count = 0;
 })

 document.addEventListener('scroll', () => {
 count = 0;
 })

上面代碼，主要通過統計count等于你設置的初始化時間second，進行回調，回調的主要內容是隱藏安全頁面；如果在統計的過程中發現有滾動或鼠標移動以及鍵盤按下等相關操作，則將count初始化為0，醬紫就能完成長時間不操作的問題了