关于css中transition的问题

Question

固定宽度（200px）->固定宽度（500px）的时候，transition可以出现完美过渡效果，但是如果我的宽度一开始不想定死，想自动被子元素撑开，也就是自适应宽度(auto)->固定宽度(500px)时，过渡效果就会失效，有很好的解决办法吗？

Answer 1

https://developer.mozilla.org...

auto 值常常较复杂，规范指出不要在它上动画。一些用户代理，比如基于 Gecko 的，遵循这点；一些，比如基于 WebKit的，没有这么严格限制。在 auto 上动画结果可能不可预期，这取决于浏览器及其版本，应当避免使用。

解决方案——改变宽度是有触发条件的吧，比如点击之类的，在更改宽度前先获取元素宽度赋值为该值，再改为500,不过这里有个需要注意的坑——就是两次宽度赋值必须分布在两次宏任务，目的是为了将两次赋值都给到渲染进程，也就是第一次赋值后第二次需要setTimeout，也可以在第二次赋值前获取一下元素宽，因为获取时浏览器会强制渲染。最好的时机是动态内容加载完毕后就赋值宽度。
https://jsbin.com/tujifezahe/...,output

Answer 2

可以用 max-width 来代替

.item{
  max-width: 100px; /*需要注意的是给一个适当的值，如果你的动态内容比较少就给小一点*/
  transition: max-width .3s;
}
.item.active{
  max-width: 500px;
}

可以参考这篇文章 https://github.com/chokcoco/i...