固定宽度(200px)->固定宽度(500px)的时候,transition可以出现完美过渡效果,但是如果我的宽度一开始不想定死,想自动被子元素撑开,也就是自适应宽度(auto)->固定宽度(500px)时,过渡效果就会失效,有很好的解决办法吗?
固定宽度(200px)->固定宽度(500px)的时候,transition可以出现完美过渡效果,但是如果我的宽度一开始不想定死,想自动被子元素撑开,也就是自适应宽度(auto)->固定宽度(500px)时,过渡效果就会失效,有很好的解决办法吗?
可以用 max-width
来代替
.item{
max-width: 100px; /*需要注意的是给一个适当的值,如果你的动态内容比较少就给小一点*/
transition: max-width .3s;
}
.item.active{
max-width: 500px;
}
可以参考这篇文章 https://github.com/chokcoco/i...
10 回答11k 阅读
6 回答3k 阅读
5 回答4.8k 阅读✓ 已解决
4 回答3k 阅读✓ 已解决
2 回答2.6k 阅读✓ 已解决
3 回答5.1k 阅读✓ 已解决
3 回答1.8k 阅读✓ 已解决
https://developer.mozilla.org...
解决方案——改变宽度是有触发条件的吧,比如点击之类的,在更改宽度前先获取元素宽度赋值为该值,再改为500,不过这里有个需要注意的坑——就是两次宽度赋值必须分布在两次宏任务,目的是为了将两次赋值都给到渲染进程,也就是第一次赋值后第二次需要setTimeout,也可以在第二次赋值前获取一下元素宽,因为获取时浏览器会强制渲染。最好的时机是动态内容加载完毕后就赋值宽度。
https://jsbin.com/tujifezahe/...,output