css 过渡动画高度变化问题
问题：
在给定的 js bin 中，当
标签显示后，.box 元素的高度会被自动撑起，但没有动画效果。如何实现点击按钮后，.box 高度慢慢变化的动画效果？
答案：
立即学习“前端免费学习笔记（深入）”；
css 动画不支持 height: auto，因此需要使用 javascript 获取 .box 元素的实际高度，并在点击按钮时切换高度，从而实现动画效果。
具体实现步骤：
在 css 中设置 .box 元素的背景颜色为蓝色，隐藏溢出内容，并设置过渡动画：
.box { background-color: blue; overflow: hidden; transition: all 1s;}
在 javascript 中获取 .box 元素的自动高度：
const autoh = $('.box').height();
初始化 .box 元素的高度为 0：
$('.box').height(0);
添加点击按钮事件，在点击时切换高度：
$('.button').click(function() { $('.box').height(h ^= autoH);});
其中 h ^= autoh 是一个位异或操作，用于在 0 和 autoh 之间切换高度。
通过这种方式，就可以实现点击按钮后，.box 高度慢慢变化的动画效果。
以上就是如何实现 CSS 过渡动画中高度自动撑起的动画效果？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1630108.html
微信扫一扫 
支付宝扫一扫 
