关于css中transition的问题

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

阅读 3.6k
2 个回答

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

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

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

可以用 max-width 来代替

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

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

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题