在另一个过渡结束后设置高度 0 px答案

【问题标题】：Set height 0 px after another transition ends在另一个过渡结束后设置高度 0 px
【发布时间】：2019-01-10 12:28:59
【问题描述】：

<!DOCTYPE html>
<html>
<style>
    .aa{
        width:300px;
        height:auto;
        background : red;
        transition : width 1s ease;
    }
    .bb {
        width:100px;
        height:0;
        overflow:hidden;
    }
</style>
<body>


<div class="aa">Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı.</div>
</body>
</html>

这里是codepen链接： https://codepen.io/anon/pen/LBmeNK

当我将“.bb”类添加到我的 div 元素时：首先，我希望发生宽度转换，并且在宽度转换之后，我希望我的 div 具有 0px 高度并隐藏溢出。

我该怎么做？

【问题讨论】：

请将javascript部分添加到您的codepen。

标签： javascript jquery css html

【解决方案1】：

在 taget 元素（您的 div）https://developer.mozilla.org/en-US/docs/Web/Events/transitionend 上触发 transitionend 事件后，您可以仅使用 height: 0 和 overflow: hidden 添加另一个类

【讨论】：

【解决方案2】：

您可以使用关键帧定义过渡。有很多指南："

CSS-Tricks

W3Schools

@keyframes my-transition {
  0%   { height: 100px; }
  100% { height: 0; overflow: hidden }
}

然后你可以将它添加到你的 css 中：

.my-animated-class { 
   transition: my-transition 1s ease-out
}

编辑：为了清楚起见，关于您的 codepen 有几件事：

你没有导入 jQuery
你没有使用 jQuery
您没有分享您打算如何添加课程。

【讨论】：

你能解释更多吗？这怎么能解决我的问题？
你需要添加 jQuery 代码来实际应用类