Vue 路由过渡是对 Vue 程序一种快速简便的增加个性化效果的的方法。可以让你在程序的不同页面之间增加平滑的动画和过渡。如果使用得当，可以使你的程序显得更加专业，从而增强用户体验。

假设一个DIV要实现手风琴效果，展开时根据内容自适应高度即从height: (any)px; 变化到 height: auto;此时设置transition不会产生效果, 原因是 transition 无法将 ()px 变为不是具体数值的 auto

CSS3中出现很多新的特性，其中比较好玩的3D操作就是：过渡和动画效果。那么css过渡和css动画的区别是什么？下面本篇文章就来给大家介绍一下CSS中过渡和动画的区别，希望对大家有所帮助。

过渡动画使 UI 更富有表现力并且易于使用。如何使用 React 快速的实现一个 Transition 过渡动画组件？实现一个基础的 CSS 过渡动画组件，通过切换 CSS 样式实现简单的动画效果，也就是通过添加或移除某个 class 样式。

当改变元素display属性时，过渡属性transition失效。display:none的时候，页面文档流中将不会存在该元素。transition无法对一个从有到无的元素产生过渡效果。

添加过渡效果的方法：在 CSS 过渡和动画中自动应用 class，可以配合使用第三方 CSS 动画库，如 Animate.css，在过渡钩子函数中使用 JavaScript 直接操作 DOM，可以配合使用第三方 JavaScript 动画库，如 Velocity.js

Vue 在插入、更新或者移除 DOM 时，动态添加css类名来达到想要的动画效果，transition标签给元素包裹一个transition标签，并设置name属性的值，这个值可以随意设置

在一定时间内平滑的过渡，也就是圆滑的以动画效果改变css的属性值。它的过渡可以由鼠标点击、焦点获取或者失去、被点击事件或对元素的改变中触发；不能主动触发，只能被动触发

CSS3的过渡属性，给web应用带来了简单优雅的动画，但是比起初次相见，他（transition）有许多细则。在这片文章中，我将会专研CSS3的过渡（transition）中更加复杂的部分，从链式和事件到硬件加速和动画函数。

总所周知，vue中的transition标签可以方便得进行动画过渡，使用的方法也很简单。这里需要主要一点的是：过渡的元素只能是以下之一：