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