前言
不涉及理论知识，请参考 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 。
- 欢迎评论区补充。
