transition动画过渡没作用无效

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（透明度）去替代。
希望这篇文章对你有帮助，若有错误的地方，请轻点喷，欢迎大神们一起讨论。

这篇好文章是转载于：学新通技术网