前言
不涉及理论知识,请参考 https://cn.vuejs.org/v2/guide/transition... ;
不使用第三方库,如 Animate.css, Velocity.js ;
贝塞尔曲线(cubic-bezier), http://yisibl.github.io/cubic-bezier/#.8... 。
正文
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>


用于面包屑:


列表:
列表方式提供了5种方式 https://github.com/jkchao/vue-blog/blob/...
最后:
过渡,可以是景上添花,也可以是 shit 。