冲突：
当改变元素display属性时，过渡属性transition失效。
原因：
display:none的时候，页面文档流中将不会存在该元素。transition无法对一个从有到无的元素产生过渡效果。
解决方法：
1.改变元素的宽/高为0px,达到隐藏的目的。
2.使用visibility替代display。
关于vue状态过渡transition不起作用的原因
总所周知，vue中的transition标签可以方便得进行动画过渡，使用的方法也很简单。这里需要主要一点的是：过渡的元素只能是以下之一：
关于CSS Transition，你需要知道的事
CSS3的过渡属性，给web应用带来了简单优雅的动画，但是比起初次相见，他（transition）有许多细则。在这片文章中，我将会专研CSS3的过渡（transition）中更加复杂的部分，从链式和事件到硬件加速和动画函数。
Transition 过渡
在一定时间内平滑的过渡，也就是圆滑的以动画效果改变css的属性值。它的过渡可以由鼠标点击、焦点获取或者失去、被点击事件或对元素的改变中触发；不能主动触发，只能被动触发
vue.js 过渡和动画
Vue 在插入、更新或者移除 DOM 时，动态添加css类名来达到想要的动画效果，transition标签给元素包裹一个transition标签，并设置name属性的值，这个值可以随意设置
vue 过渡
添加过渡效果的方法：在 CSS 过渡和动画中自动应用 class，可以配合使用第三方 CSS 动画库，如 Animate.css，在过渡钩子函数中使用 JavaScript 直接操作 DOM，可以配合使用第三方 JavaScript 动画库，如 Velocity.js
基于 React 实现一个 Transition 过渡动画组件
过渡动画使 UI 更富有表现力并且易于使用。如何使用 React 快速的实现一个 Transition 过渡动画组件？实现一个基础的 CSS 过渡动画组件，通过切换 CSS 样式实现简单的动画效果，也就是通过添加或移除某个 class 样式。
css过渡和css动画的区别是什么？
CSS3中出现很多新的特性，其中比较好玩的3D操作就是：过渡和动画效果。那么css过渡和css动画的区别是什么？下面本篇文章就来给大家介绍一下CSS中过渡和动画的区别，希望对大家有所帮助。
transition不会产生效果 height:auto
假设一个DIV要实现手风琴效果，展开时根据内容自适应高度即从height: (any)px; 变化到 height: auto;此时设置transition不会产生效果, 原因是 transition 无法将 ()px 变为不是具体数值的 auto
4 个Vue 路由过渡动效
Vue 路由过渡是对 Vue 程序一种快速简便的增加个性化效果的的方法。可以让你在程序的不同页面之间增加平滑的动画和过渡。如果使用得当，可以使你的程序显得更加专业，从而增强用户体验。
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!