Set height 0 px after another transition ends

0
votes
<!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>

Here is the codepen link: https://codepen.io/anon/pen/LBmeNK

When I add ".bb" class to the my div element: First I want my width transition to be happened and after width transition I want to my div to have 0px height and overflow hidden.

How can I do that?

2
javascriptjquerycsshtml
Please add javascript part to your codepen. – pennyroyal

2 Answers

2
votes

You can add another class with just height: 0 and overflow: hidden after transitionend event is fired on the taget element (your div) https://developer.mozilla.org/en-US/docs/Web/Events/transitionend

0
votes

You can define a transition using keyframes. There are plenty of guides:"

CSS-Tricks

W3Schools

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

And then you can add it to you css:

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

EDIT: To make it clear, there are a few things off about your codepen:

  • You are not importing jQuery
  • You are not using jQuery
  • You are not sharing how you intend to add the class.