Css animation not working with opening div in javascript

Question

I have a very simple Javascript code, and CSS. I have the CSS of myDiv in a display: none status. When I add the Javascript and run the code the MyDiv is popping open and the animation is not visible, when I put a height on the div even 0, and click the button it is opening with (transition) animation. Why is this and is it possible to animate from display: none?

    .myDiv{
       display: none;
    }
    .myDiv.open{
        background: red;
        display: inline-block;
        width: 60px;
        height:200px;
        transition: height 2s;
    }

<div><button class="myBtn">Click me</button></div>

<div class="myDiv">
    this is the text.
</div>


    let clickBtn = document.querySelector('.myBtn');
    let divText = document.querySelector('.myDiv');
    let statusclose = true;
    
    clickBtn.addEventListener('click', function(event){
        if(statusclose == true){            
                divText.classList.add('open');
                return statusclose = false;
         }else if(statusclose == false){
                divText.classList.remove('open');
                return statusclose = true;
                    }
    });

You have been given the answers to your question. Choose one of the answers provided as solved. — s.kuznetsov, Jan 11 '21 at 15:19

score 1 · Answer 1 · answered Jan 10 '21 at 04:39

All your javascript code with a counter can be replaced with the toggle() method:

divText.classList.toggle('open');

Very important. With the display: none rule you won't be able to make an transition effect. But this can be fixed by using only the height and overflow rules.

let clickBtn = document.querySelector('.myBtn');
let divText = document.querySelector('.myDiv');
    
clickBtn.addEventListener('click', function(event){
  divText.classList.toggle('open');
})

.myDiv{
  background: red;
  width: 60px;
  height: 0;
  transition: height 2s;
  overflow: hidden;
}

.myDiv.open{
  height: 200px;
}

<div><button class="myBtn">Click me</button></div>

<div class="myDiv">
    this is the text.
</div>

score 0 · Answer 2 · answered Jan 10 '21 at 04:21

0

Animation To or From state display:none is not possible. You can animate from height:0; to let say height:200px;

This Topic is alredy discussed mutliple times, like: CSS Animation and Display None

answered Jan 10 '21 at 04:21

Zeljko

1
3

score 0 · Answer 3 · answered Jan 10 '21 at 04:28

try this

            <style>
        .myDiv {
            transition: opacity 2s ease-out;
            opacity: 0;
            height: 0;
            overflow: hidden;
        }

        .myDiv.open {
            background: red;
            display: inline-block;
            width: 60px;
            height: 200px;
            opacity: 1;
        }
    </style>

    <div><button class="myBtn">Click me</button></div>

    <div class="myDiv">
        this is the text.
    </div>


    <script>
        let clickBtn = document.querySelector('.myBtn');
        let divText = document.querySelector('.myDiv');
        let statusclose = true;

        clickBtn.addEventListener('click', function (event) {
            if (statusclose == true) {
                divText.classList.add('open');
                return statusclose = false;
            } else if (statusclose == false) {
                divText.classList.remove('open');
                return statusclose = true;
            }
        });

    </script>

Css animation not working with opening div in javascript

3 Answers3