大家好，我是奶綠茶，今天來聊聊 vue 裡的 transition-group
先來看一下官方的範例：
https://vuejs.org/examples/#list-transition
在 v-for 的外層新增一個 TransitionGroup Component，當元素新增或刪除時，就可以有動態效果，簡單又好用。
當新增元素時，下方的元素會有個往下移的態動效果，單看 CSS 的部份，
怎麼想都不可能只用純 CSS 就做到。
還好官網的範例給了一個重要的連結。
FLIP list transitions with the built-in <TransitionGroup>.
https://aerotwist.com/blog/flip-your-animations/然後再去翻 vue 的原始碼，就可以看到 TransitionGroup 就是使用上方的 FLIP 手法。
https://github.com/vuejs/core/blob/main/packages/runtime-dom/src/components/TransitionGroup.ts
FLIP 指的是 First, Last, Invert, Play 這四個 Step，因為如果直接對 DOM 更改元素的位置和大小，會觸發 Browser 的 Layout 改變，
這部份可以參考 https://csstriggers.com/ ，查看那些屬性會執行更多的運算。
先講結論，CSS 的動態要優先採用 transform，參考 csstriggers ，就會發現該屬性只會發生 Compositing。
而 FLIP 就是採用這樣的特性，把可預期的最終位置先算出來，再使用 transfrom 來做到效果，讓效能提升，而 vue TransitionGroup 也是採用這樣的方法。
附上奶綠測試的版本，祝大家學習愉快
https://jsbin.com/rufopeg/4/edit?html,css,js,output
參考文章：
https://ithelp.ithome.com.tw/articles/10249554
https://blog.techbridge.cc/2018/10/20/flip-your-animation/
https://aerotwist.com/blog/flip-your-animations/
