前言
不涉及理論知識，請參考 https://cn.vuejs.org/v2/guide/transitions.html ;
不使用第三方庫卓鹿，如 Animate.css, Velocity.js ;
貝塞爾曲線（cubic-bezier），http://yisibl.github.io/cubic-bezier/#.82,.82,.23,.21 衍慎。
正文
-
fade（淡入淡出）酪耕，大概是最常見的：
.fade-enter-active, .fade-leave-active { transition: opacity .3s; } .fade-enter, .fade-leave-active { opacity: 0; }
- vue-hackernews 翻頁：
.slide-left-enter,
.slide-right-leave-to {
opacity: 0;
transform: translate(-30px, 0);
}
.slide-left-leave-to,
.slide-right-enter {
opacity: 0;
transform: translate(-30px, 0);
}
-
btn ：
<template> <div> <transition-group tag="div" name="btn"> <button key="1">a</button> <button key="2">b</butotn> </transition-group> </div> <template> <style> .btn-enter-active, .btn-leave-active { transition: all .5s; } .btn-enter, .btn-leave-active { opacity: 0; transform: translateX(30px); } .btn-move { transition: all .5s; } .btn-leave-active { position: absolute; } </style>
用于面包屑：
最后：
- 過渡，可以是景上添花膳凝，也可以是 shit 。
- 歡迎評論區(qū)補充恭陡。
