結束語今天在檢視react-transition-group的時候，突然發現多出來了乙個元件：
咦？奇怪，我記得以前明明只有仨啊，啥時候更新出來的，好奇心驅使我點了進去新出現的那個switchtransition，真是不看不得了，一看嚇一跳啊！
考慮到大家的英文水平…(當然這句話好像不用啥英語水平都能看懂)，我來給大家翻譯一下：這是乙個受到vue transition modes啟發的過渡元件。說實話vue和react我都經常用，一直都覺得vue的transition元件和react的react-transition-group可像可像的了，幾乎就是換了個別名，用法啥的都差不多，也不知道到底是誰抄的誰，也許他倆都是抄的angular的動畫庫ng-animate。哦不對，應該叫啟發，是誰受到了誰的啟發(有沒有感覺換了乙個詞瞬間就變得高大上了起來)，其實本來大家都是開源的，把好的東西吸收借鑑過來是非常好的一件事情，但是由於vue一直給人的印象都是乙個非常優秀的借鑑者而不是非常優秀的創新者，而react恰恰相反。所以大家潛意識裡一直以為是vue借鑑的react，直到今天我才發現原來vue早已擁有的模式，react-transition-group才剛剛實現，那就是過渡模式
其實vue的官網描述的已經非常詳細了，所以在這裡我就不再重複敘述了，給大家乙個傳送門：vue transition modes，總而言之它實現了這麼乙個炫酷的功能：在你的元件切換的時候，可以讓將要移除的元件和將要進入的元件有個動畫效果，這兩個動畫效果還有個時間差，時間差有兩種模式，一是將要移除的元件先來個動畫，比如淡出，等它淡出完了，新的元件再淡入，這樣的時間差形成了完整的一套淡入淡出效果，另一種模式則完全相反，先新的元件淡入，再把老元件淡出。
然而就是在vue中很輕鬆就可以實現的炫酷效果在react中卻沒有對應的封裝好的元件，只能自己很麻煩的實現，於是乎switchtransition橫空出世啦！
首先react的過渡元件並不像vue那樣直接整合在vue核心庫之中，而是需要手動的去安裝：
#npm
npm i react-transition-group -
s#yarn
yarn add react-transition-group
import react,
from
'react'
;import
;import
from
'react-transition-group'
function()
key=
>
>on<
/button>):
(>off<
/button>)}
<
/csstransition>
<
/switchtransition>);
}export
.fade-enter, .fade-exit-active
.fade-enter-active
.fade-enter-active, .fade-exit-active
至此我們就實現了vue官網過渡模式的第乙個例子↑↑↑，接下來我們實現第二個例子↓↓↓
import react,
from
'react'
;import
;import
from
'react-transition-group'
function()
key=
>
>on<
/button>):
("btn" onclick=
>off<
/button>)}
<
/csstransition>
<
/switchtransition>
<
/div>);
}export
.fade-enter
.fade-enter-active
.fade-exit
.fade-exit-active
.fade-enter-active, .fade-exit-active
.relative
.btn
在switchtransition元件上一共就只有mode這麼乙個屬性，屬性一共就只有倆值:out-in、in-out，如果是out-in的話甚至連屬性都可以省略不寫了，因為是預設屬性。元件裡面要有或者元件，不能直接包裹你想要切換的元件。
裡面的或元件不再像以前那樣接受in屬性來判斷元素是何種狀態，取而代之的是key屬性，底層是通過key屬性來判斷元件該執行移入還是移出動畫的。
終於明白我為啥來網易了！
閱讀本文大概需要5分鐘。今天是篇水文，記錄下這幾天發生的事情，順帶說點感悟。事情是這樣的，前兩天公司組織了乙個課程manager的offsitemeeting，一群人拉到密雲古北水鎮做管理共創，開始前老闆交了個任務 分享管理認知。這讓洋哥很懵逼，雖然做管理很多年了，但從來沒給人分享過管理，更何況是在...
vue路由帶參
column label 操作 width 250 fixed right scope to 檢視 column 在html中聲名標籤，並使用 to來指定引數和url created by lixinjian1 on 2018 06 28.function let router new vuerou...
Vue路由帶引數跳轉
path 是要跳轉的路由路徑 推薦換成 name 值，name pathname 命名路由，兩者都可以進行路由導航 params 是要傳送的引數，引數可以直接 key value 形式傳遞 類似post query 是通過 url 來傳遞引數的同樣是 key value 形式傳遞 類似get 重新整...