（學習心路歷程）Vue過渡/動畫 VS. CSS3過渡/動畫
【此篇為本人的個人見解和嗶嗶賴賴，如果有觀點不對的地方，還請大家指出來哇！！🤪】
最近實習在做一個項目，裡面應用的動畫效果還蠻複雜的，因為本身對Vue框架比較熟悉，所以最終選擇了Vue框架。
自己之前從來沒接觸過動畫，所以就先學了兩天，知道了transition、animation，然後就開始上手了。
畢竟本身就是新手，再加上自己對Vue其實並沒有那麼理解，於是乎，各種 js 操作 dom（剛好最近在看《JavaScript DOM編程藝術》🙄)，改寫的程式碼全都寫了，不該寫得程式碼也全都寫了，不知道的誰能看出來我用的是Vue框架！！
然後在上周的程式碼review，被leader和同事指出來了程式碼中的問題（不得不說，真的學到了很多）
1. 用 js 操作 DOM，完全沒把 Vue 的優勢利用出來，人家Vue明明可以操作虛擬dom，我還偏要去改變真實dom。
2. 對於一些動畫效果，我自己實現就要設置各種 setTimeout 之類的，而Vue中有封裝好的 <transition> 組件，可供直接使用。
醍醐灌頂，我先把涉及id的操作都改成了ref，然後開始學習 Vue <transition> 組件。其實學的過程中，會一直猶豫，我的那些動畫效果，是用 <transition> 組件實現好呢，還是自己在js程式碼中手動添加style動畫屬性好呢（沒錯，就跟我剛開始做項目之前選框架一樣，其實這些沒多重要，但自己就是會各種對比，希望找到更合適的解決方案）於是乎，就有了這篇部落格~（總自己心裡想怪難受的，還不如把它記錄下來）
（ps：具體的使用方法我都不介紹了，如果有時間的話，會在其它部落格里總結一下）
一、 <transition> 組件
用人家封裝好的組件，就肯定有一定的局限性。
首先呢，它只能用於以下幾種操作：v-show/v-if、動態組件、組件根節點。其實就是，從無到有、從有到無的這樣一個過渡/動畫效果。這樣就有一定的局限性了，比如那些，點擊一下出現的動畫效果，就不能用<transition>標籤。
但是對於那種，要用v-if/v-show展示的標籤，並且在它們進入或消失的時候要有一定的動畫效果，那麼用這個就超級方便。為啥呢，因為當某個標籤通過這種方式消失的時候，設置的過渡/動畫效果就沒了，要想實現這個效果，就需要在js中，設置 setTimeout，待動畫時間結束後，設置 display: none。
當然了，<transition>還是很強大的，而且其中的狀態過渡其實自己並不是特別了解。如果真的對其得心應手了，我相信絕對是十分強大的。（一想到這就哭唧唧，又給自己埋了個坑，回頭一定要按照官網的例子一個一個復現一遍，希望比現在的自己有更深的理解==）
二、 CSS3 過渡/動畫
這個就很隨意，也很強大了，你可以實現任何你想要的效果，只要不怕麻煩。
寫到最後發現自己寫的沒啥營養價值，就當是自己的碎碎念吧，以後在使用過程中，理解一定會越來越深刻的，慢慢來！
又給自己埋了好多坑，先列出來，一一實現hhh：
- 好好學習 transition 和 animation 相關的，不止停留在會用階段。
- 查看 <transition> 源碼！！！（相信自己會對動畫有更深的理解！！）
- 如果可以的話，希望可以看看大神們是如何寫複雜動畫的。
