標簽：items shu null 亂序 view rgba frame min com
<transition-group> 組件還有一個特殊之處。不僅可以進入和離開動畫，還可以改變定位。要使用這個新功能只需了解新增的 v-move class，它會在元素的改變定位的過程中應用。像之前的類名一樣，可以通過 name attribute 来自定义前缀，也可以通过 move-class attribute 手动设置。
v-move 對于設置過渡的切換時機和過渡曲線非常有用，你會看到如下的例子：
<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 簡單的動畫隊列
使用 transforms 将元素从之前的位置平滑过渡新的位置。
該動畫的思路是：
1.標記處未變化前的位置（用getBoundingClientReact）;
2.不用動畫，立即讓元素移動到目標位置，並標記出來變化後的位置；
3.重新移動到原位置，讓元素移動到原來的位置；
4動畫過渡到新位置；
具體的例子，AB兩個元素的交換位置爲例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <button>change</button> <li>A</li> <li>B</li> <script> var btn = document.getElementsByTagName(‘button‘)[0]; function getTop(dom) { return dom.getBoundingClientRect().top; } function animate(dom, initTop) { var char = initTop - getTop(dom); //获取两个位置的差值 dom.style.transform = `translateY(${char}px)`; //立即变到原来的位置 requestAnimationFrame(() => { requestAnimationFrame(() => { //requestanimationframe是在渲染前执行，所以需要两次后 dom.style.transform = null; dom.style.transition = dom.style.transition = ‘1s‘; dom.addEventListener(‘transitionend‘, function () { dom.style.transition = null; }) }) }) } btn.onclick = function () { var li_1 = document.getElementsByTagName(‘li‘)[0]; var li_2 = document.getElementsByTagName(‘li‘)[1]; var li_1_top = getTop(li_1); var li_2_top = getTop(li_2); document.body.insertBefore(li_2, li_1); animate(li_1, li_1_top); animate(li_2, li_2_top) } </script> </body> </html>
標簽：items shu null 亂序 view rgba frame min com
原文地址：https://www.cnblogs.com/dangdanghepingping/p/14953948.html
