transition无效的原因
1、只给该元素赋予了过渡属性的结束值，并未在过渡前定义初始值。
css
.header {
position: relative;
width: 200px;
height: 50px;
background: red;
transition: all 0.3s ease-in-out;
}
.showMenu.layui-layout-admin .header{ left:-200px; }
js
$(".moveHandle").click(function(){
$(".header").toggleClass("showMenu");
})
结果发现header元素是直接闪现到左边去，没有发生过渡效果，也就是说过渡失效了。
解决方法：在header选择器里定义过渡属性（left）的初始值（left: 0px）再次触发移动事件时，就出现动画效果了。
原因：过渡，必定有个初始值和结束值才叫过渡。
2、display: none 和display: block之间的切换也会出现过渡效果失效的情况。
原因：display: none是销毁当前dom节点，再次切换为display: block时会再创建节点，此时css选择器会重新赋予上去。所以不存在渐变动画。
解决方法：用opacity（透明度）去替代。
希望这篇文章对你有帮助，若有错误的地方，请轻点喷，欢迎大神们一起讨论。
|