transition动画过渡没作用（无效）

最新推荐文章于 2024-01-03 17:15:47 发布

Lewin.Lin

最新推荐文章于 2024-01-03 17:15:47 发布

阅读量1.4w

点赞数 8

分类专栏： css 文章标签：动画 css3 css

本文链接：https://blog.youkuaiyun.com/weixin_45689946/article/details/120983960

版权

css 专栏收录该内容

2 篇文章

订阅专栏

本文探讨了CSS过渡效果失效的两个常见原因：1) 只设置了结束值而未定义初始值，导致过渡无法体现；2) display:none与display:block切换不支持过渡。解决方法包括在初始状态中定义过渡属性和使用opacity替代display来实现动画效果。理解这些原理有助于优化CSS动画性能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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; }

$(".moveHandle").click(function(){
	$(".header").toggleClass("showMenu");
})

结果发现header元素是直接闪现到左边去，没有发生过渡效果，也就是说过渡失效了。

解决方法：在header选择器里定义过渡属性（left）的初始值（left: 0px）再次触发移动事件时，就出现动画效果了。
原因：过渡，必定有个初始值和结束值才叫过渡。

2、display: none 和display: block之间的切换也会出现过渡效果失效的情况。

原因：display: none是销毁当前dom节点，再次切换为display: block时会再创建节点，此时css选择器会重新赋予上去。所以不存在渐变动画。
解决方法：用opacity（透明度）去替代。
希望这篇文章对你有帮助，若有错误的地方，请轻点喷，欢迎大神们一起讨论。