元素有一个展开收起的效果，展开的时候，高度是希望自适应内容高度的，所以设置了height:auto；但是这样一来，动画transition: all .3s就失效了，这里百度了一些控制max-height或者js重新计算展开的内容高度都能一定的解决，但总不是很好
<div class="parent-box">
<div class="animation-box">height展开收起的动画</div>
</div>
在动画元素的父元素加上interpolate-size属性
.parent-box{
interpolate-size:allow-keywords;//让子元素设置了height:auto的动画生效;
}
给动画元素加上height:calc-size属性
.animation-box{
height:calc-size(auto,size)
}
新属性总是有一些兼容性问题，大家可以自行根据需求选择
实现过渡效果可以使用css的transition属性，但元素的height属性为auto时，transition就...
1.针对height的transition需要指定一个明确的初始和结束状态，例如 height: auto; 这样...
width: auto;height: auto; max-width: 100%;max-height: 100...
需求是有一些动态内容折叠起来的，点击后弹开 js定时器的动画过渡暂不考虑，于是就想到transition过渡 一开...
1、height:auto; 失效，必须指定 image 的高度为具体数值,不然高度为0。 2、真机和模拟器的问题...
transition动画 transition-property 设置过渡的属性，比如：width height ...
transition-property（css属性，例如：width、height等） transition-du...
image{height: auto;}
1、aspectfit img{ width: auto; height: auto; max-wid...
1、居中：margin: 0 auto；需要设置body { width: 100%; height:auto; ...
本文标题：height:auto;transition失效解决方案
本文链接：https://www.haomeiwen.com/subject/meqpejtx.html
网友评论