css过渡动画失效怎么办?对高度过渡动画失效解析
发布时间:2022-04-18 14:24:01 所属栏目:语言 来源:互联网
导读:添加css过渡动画,能够从一种样式转变为另一种的时候有更自然、顺滑的过渡效果,美化网站页面。但是,有些朋友遇到过渡动画失效的问题,这是什么回事呢?下面我们来分析分析。 伪代码大概是这样: { height: unset; transition: all 0.3s linear; will-chang
添加css过渡动画,能够从一种样式转变为另一种的时候有更自然、顺滑的过渡效果,美化网站页面。但是,有些朋友遇到过渡动画失效的问题,这是什么回事呢?下面我们来分析分析。 伪代码大概是这样: { height: unset; transition: all 0.3s linear; will-change: height; &.up { height: 0; } &.down { height: unset; } } 把它还原成一个实际的 Demo,效果大概是这样(本质想的想法是通过给元素切换它的.up,.down类,让它实现展开、合上的动画 ): 嗯哼?很奇怪,明明给height属性设置了transition,为什么过渡动画没有触发,而是直接一步到位展开了呢? 我们期待的效果是这样的: 但是,我们又希望能够做到动态高度的过渡转换,是不是就没有办法了么? 巧用max-height适配动态高度 嘿嘿,这里有一个非常有意思的小技巧。既然不支持height: auto,那我们就另辟蹊径,利用max-height的特性来做到动态高度的伸缩。 (编辑:济南站长网) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |