javascript - transition height auto 过渡动画
问题描述
1.为什么收缩时，没有动画效果？
2.代码
<!DOCTYPE html><html lang='en'><head> <title></title> <meta charset='UTF-8'> <meta name='viewport' content='width=device-width, initial-scale=1'> <style>* { transition: all .6s;}.container { position: fixed; top: 0; left: 0; right: 0; height: 100px; max-height: 100px; width: 100px; margin: 5px auto; background: RGBA(0, 43, 54, 0.80); overflow: hidden; text-align: center;}.container:hover { height: auto; max-height: 100%; bottom: 0px;} </style></head><body> <p class='sketch'><p class='container'> <!--<a href='javascript:void(0)'>开关</a>--></p> </p> <!--<script>const classList = document.querySelector(’.container’).classList;document.querySelector(’#switch’).addEventListener(’click’, function (e) { if (classList.contains(’expand’)) {document.querySelector(’.container’).classList.remove(’expand’); } else {document.querySelector(’.container’).classList.add(’expand’); }}); </script>--></body></html>
3.在线Demo(己解决)
问题解答
回答1：因为我们所能看到的过渡动画，其实是height值的变化过程，而你在hover属性中，并没有给height赋予明确的值，因此在移出鼠标之后，浏览器其实并不知道该从哪个值变化到初始值，于是就直接返回到初始值，所以没有过渡效果
回答2：原因如1楼所说。可以设置height:100%;。
回答3：.container:hover { height: 100%; // 这个要明确值 max-height: 100%; bottom: 0px;}
相关文章：
1. 关于docker下的nginx压力测试2. docker - 各位电脑上有多少个容器啊？容器一多，自己都搞混了，咋办呢？3. docker-compose中volumes的问题4. html - 开发android的调取我web页面 他之前用的是收费的浏览器包 显示是全的换了免费的浏览器包后 显示就不全 是什么原因啊5. 使用 CSS3 的 Media Query 浏览器会加载其他不同分辨率的 css 文件么6. 如何解决Centos下Docker服务启动无响应，且输入docker命令无响应？7. “Webdrivers”可执行文件可能具有错误的权限请参阅https://sites.google.com/a/chromium.org/chromedriver/home8. javascript - 给js写的盒子添加css样式，css样式没起作用。9. 数据挖掘 - 如何用python实现《多社交网络的影响力最大化问题分析》中的算法？10. 前端 - 类到底该如何去命名 .newsList 这种的命名难道真的不是过度语义化吗？~
网公网安备