为啥使用 javascript / jQuery 添加类时 css 转换不起作用？

Posted 2023-03-06

【中文标题】为啥使用 javascript / jQuery 添加类时 css 转换不起作用？

【英文标题】：Why is css transition not working when adding class using javascript / jQuery?为什么使用 javascript / jQuery 添加类时 css 转换不起作用？

【发布时间】：2014-02-04 11:12:13

【问题描述】：

我有一个消息框，我想在点击时向下滑动。我通过 Angular（在我的示例中为 jQuery）添加一个 css 类来做到这一点。但是我的 CSS 过渡没有生效。

我有什么明显的错误吗？

这是我的小提琴：http://jsfiddle.net/mBKXn/

和我的代码：

// jQuery
$('.test').on('click',function()
  $('#msgContainer').toggleClass('msgShow');
);

// html
<div class="container">
    <div id="msgContainer" class="msg">
        <p>Message here</p>
        <p>T2</p>
        <p>T4</p>
    </div>
    Test text
</div>

<button class="test">Click</button>

// CSS
.container
    position: relative;
    height: 200px;
    width: 400px;
    border: solid 1px #222;


.msg
    position: absolute;
    top: 0;
    background-color: #FEEFB3;
    height: 0;
    width: 100%;
    overflow: hidden;
    -webkit-transition: height 0.8s linear;
    -moz-transition: height 0.8s linear;
    -o-transition: height 0.8s linear;
    -ms-transition: height 0.8s linear;
    transition: height 0.8s linear;    


.msgShow
    height: auto;

【问题讨论】：

jQuery duration for toggleClass issue的可能重复

CSS transition height: 0; to height: auto;的可能重复

【参考方案1】：

另一种（旧版 IE 兼容）方法是通过 slideToggle。

Updated Fiddle that works 和 another Fiddle 我删除了你的一些过渡 css，我认为它使动画更流畅。

您的代码需要稍作改动：

$('.test').on('click',function()
  $('#msgContainer').slideToggle('slow');
);

你的班级需要稍作改动：

.msg
    display:none;
    position: absolute;
    top: 0;
    background-color: #FEEFB3;
    height: auto;
    width: 100%;
    overflow: hidden;

【讨论】：

他正在做一个从高度200px到高度auto的css转换（auto是原因）

错了。我正在使用 CSS 过渡，即动画。正如 Kevin 和 Kasper 都指出的那样，css 转换不适用于 auto 高度。

【参考方案2】：

您需要设置一个定义的高度。 Height:auto 不起作用，因为这是默认高度值。

在此处查看 height 属性的规范： http://www.w3.org/TR/CSS2/visudet.html#the-height-property

http://jsfiddle.net/mBKXn/7/

.msgShow
    height: 100%;

【讨论】：

您可以将高度设置为 100%

我试过了，但它填满了整个 div。但是，如果我设置一个 max.height，使用 100% 效果很好:) 小提琴：jsfiddle.net/mBKXn/8

【参考方案3】：

要将高度从 0 设置为自动，您必须改用 max-height：

.msg
    position: absolute;
    top: 0;
    background-color: #FEEFB3;
    max-height: 0;
    width: 100%;
    overflow: hidden;
    -webkit-transition: max-height 0.8s linear;
    -moz-transition: max-height 0.8s linear;
    -o-transition: max-height 0.8s linear;
    -ms-transition: max-height 0.8s linear;
    transition: max-height 0.8s linear;    


.msgShow
    max-height: 1000px;

似乎有效：http://jsfiddle.net/mBKXn/3/

也看看这个question。

【讨论】：

这确实有效，但它是有问题的，因为一旦 max-height 值超过高度，即使浏览器继续“动画”，也没有进一步的 visual 变化。当您再次单击时，值将 down 动画到实际高度时会出现明显的停顿。

max-height: 100%; 应该足够了 ;) jsfiddle.net/mBKXn/6 但是 Pointy 提出了一个很好的观点

@A.Wolff 是的，但那是 parent 元素高度的 100%，所以在切换回 0 时仍然会暂停。

@Pointy ya，这是正确的，可能是个问题。你知道怎么解决吗？

是的，这是真的。因此，在使用这种方法时，应该设置合理的最大高度（而不是像我的示例中那样 1000 像素），以减少向后切换时的动画延迟。