Question

<!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，并且溢出是隐藏的。

我该怎么做？

Answer 1

在taget元素（您的div）https://developer.mozilla.org/en-US/docs/Web/Events/transitionend

上触发height: 0事件之后，您可以添加仅包含overflow: hidden和transitionend的另一个类

Answer 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
您没有分享打算添加课程的方式。

在另一个过渡结束后将高度设置为0 px

2 个答案: