.slide-fade-enter{
opacity: 0;
transform: translateX(100px);
/*從哪里開始過渡：在過渡之前我就把位置定義在100px的位置,並且透明度從0開始回到默認值*/
}
.slide-fade-enter-active{
/*進入過渡持續中*/
/*一般用於設置進入動畫的事件和過渡曲線*/
transition: all 8s ease;
}
.slide-fade-enter-to{
background: red;
/*從動畫開始慢慢變到紅色背景,進入動畫完成后,移除紅色背景*/
}
.slide-fade-leave{
/*只持續一幀,沒啥用*/
/*離開過渡前*/
}
.slide-fade-leave-active{
/*離開過渡中*/
/*一般用於設置離開動畫的事件和過渡曲線*/
transition: all 8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.slide-fade-leave-to{
/*離開過渡后*/
opacity: 0;
transform: translateX(100px);/*過渡到那里去：在離開的過渡位置定義在100px的位置，透明度從默認值回到0*/
}
簡寫：
/*.slide-fade-enter-active,.slide-fade-leave-active{
transition: all .5s ease; 定義我的過渡持續的時間以及運動曲線
}
.slide-fade-enter,.slide-fade-leave-to{
opacity: 0;
transform: translateX(50px);從50px的地方進入，也將離開到50px的位置去
}*/