gpt4 book ai didi

css - :targeting sibling? sibling 的过渡高度

转载 作者:太空宇宙 更新时间:2023-11-04 15:27:48 27 4
gpt4 key购买 nike

我正在尝试为我的网站做一种 Accordion ,类似于 this website 上的那个。 , 但没有切换。

我正在使用的代码是 here .

我有基本的设置工作,但我似乎无法让 li 的高度正确过渡(如果有的话);我会很感激一些帮助。

解决方案最好只使用 CSS,但如果这是唯一/最好的方法,我愿意使用 JS/jQuery。

我已尝试阅读此站点上的其他问题来修复它,但我做错了什么或解决方案没有帮助。

最佳答案

一种方法是使用 CSS3 转换(适用于现代浏览器),但不可能(如果我错了,有人会纠正我)将 height: 0; 转换为 height: 100%; 因此,如果您不知道实际高度,一种解决方法是使用 max-height 代替。在这种情况下,您需要将 max-height 设置为比以往更大的值。

所以添加这样的东西可能就是您要找的东西?

li {
opacity: 0;
max-height: 0;
}

h2:target~li { /* Want to transition this */
opacity: 1;
max-height: 100px;
-webkit-transition: max-height 1.0s;
-moz-transition: max-height 1.0s;
-ms-transition: max-height 1.0s;
-o-transition: max-height 1.0s;
transition: max-height 1.0s;
}​

DEMO

在您的情况下,如果您也想转换不透明度属性,您只需将 transition: max-height 1.0s; 更改为 transition: all 1.0s;这意味着您将转换所有属性。

如果您想阅读有关 CSS3 过渡的内容,请点击以下链接: http://www.w3.org/TR/css3-transitions/

关于css - :targeting sibling? sibling 的过渡高度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13781553/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com