您的位置：首页技术文章
文章详情页

javascript - transition height auto 过渡动画

浏览：333日期：2023-06-22 15:06:07

问题描述

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;}

标签： JavaScript
上一条：javascript - 怎么实现让 div 里面的 img 元素 中心居中, 如下示例图下一条：javascript - 在点击nav后，用JS加上颜色，怎么在页面跳转后仍能保持改变后的颜色？
相关文章：
1. node.js - 我是一个做前端的，求教如何学习vue，node等js引擎？2. docker api 开发的端口怎么获取？3. docker images显示的镜像过多，狗眼被亮瞎了，怎么办？4. PHP中的$this代表当前的类还是方法？5. java - 为什么第一个线程已经释放了锁，第二个线程却不行？6. 老师，flex-shrink: 1; 按视频操作，不会自动缩放7. 前端 - 类到底该如何去命名 .newsList 这种的命名难道真的不是过度语义化吗？~8. sublime-text - sublime text 3中编译python（sublimeREPL），如何仅运行单行/选定部分9. 如何解决docker宿主机无法访问容器中的服务？10. 如何解决Centos下Docker服务启动无响应，且输入docker命令无响应？
排行榜
node.js - 我是一个做前端的，求教如何学习vue，node等js引擎？
node.js - 我是一个做前端的，求教如何学习vue，node等js引擎？
1. docker api 开发的端口怎么获取？
2. docker images显示的镜像过多，狗眼被亮瞎了，怎么办？
3. android glide asbitmap 在baseadpter中的问题
4. java - 为什么第一个线程已经释放了锁，第二个线程却不行？
5. docker镜像push报错
6. docker网络端口映射，没有方便点的操作方法么？
7. sublime-text - sublime text 3中编译python（sublimeREPL），如何仅运行单行/选定部分
8. 前端 - 类到底该如何去命名 .newsList 这种的命名难道真的不是过度语义化吗？~
9. 老师，flex-shrink: 1; 按视频操作，不会自动缩放
10. 如何解决Centos下Docker服务启动无响应，且输入docker命令无响应？
热门标签