Transition when removing class with display: none

Question

I have a list of divs, some of them are hidden through class: "not-updated" while others are visible.

.not-update{
            display: none
}

At a certain point, due to some AJAX calls, some of the hidden divs might show up, by removing the class: "not-updated".

However, I would like that they appear with a transition, similarly to what happens with .fadeTo("slow", 1).

Here is a jsfiddle that might help to understand better the situation. In this example, for simplification, it will only appear one div, but in reality it could be several of them and randomly.

Trials

As you will see, I tried this suggestion, without success:

.box{
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

This one also did not help:

$(this).removeClass('not-updated',1000);

Any idea of how to achieve it?

Firstly, for the CSS animation to work, the elements have to be hidden when inserted, and then the class has to be removed. The other examples, where you animate `removeClass`, requires jQuery UI. — adeneo, Aug 12 '17 at 13:37
Also note that transitions don't work on the `display` property — adeneo, Aug 12 '17 at 13:45

score 2 · Answer 1 · answered Aug 12 '17 at 14:08

This might help you with @keyframes https://jsfiddle.net/gm3Lb02y/1/

$('#updater').click(function() {
    $('#box7').removeClass('not-updated');
});

.box{
    border: 1px solid black;
    width: 350px;
    height: 40px;
    -webkit-animation: fadeAnimation 3s;
}

.not-updated{
    display: none;
}

@-webkit-keyframes fadeAnimation {
    0% {
        opacity: 0;
    }
    25% {
        opacity: 0.25;
    }
    50% {
        opacity: 0.5;
    }
    100% {
        opacity: 1;
    }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="box1" class="box">Box1</div>
<div id="box2" class="box not-updated">Box2</div>
<div id="box3" class="box">Box3</div>
<div id="box4" class="box not-updated">Box4</div>
<div id="box5" class="box not-updated">Box5</div>
<div id="box6" class="box">Box6</div>
<div id="box7" class="box not-updated">Box7</div>
<div id="box8" class="box">Box8</div>

<br>
<button id="updater">
Click me
</button>

One more solution with slideDown https://jsfiddle.net/gm3Lb02y/3/

$('#updater').click(function() {
    $('#box7').slideDown('3000').removeClass('not-updated');
});

.box{
    border: 1px solid black;
    width: 350px;
    height: 40px;
}

.not-updated{
    display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="box1" class="box">Box1</div>
<div id="box2" class="box not-updated">Box2</div>
<div id="box3" class="box">Box3</div>
<div id="box4" class="box not-updated">Box4</div>
<div id="box5" class="box not-updated">Box5</div>
<div id="box6" class="box">Box6</div>
<div id="box7" class="box not-updated">Box7</div>
<div id="box8" class="box">Box8</div>

<br>
<button id="updater">
Click me
</button>

Hope this might help you.

I found your second approach the nicest, as it does the same effect as in Cristiano's reply, but with fewer modifications. Unfortunately, somehow it does not work with my real code. — J0ANMM, Aug 12 '17 at 15:05

score 2 · Answer 2 · answered Aug 12 '17 at 14:08

The .fadeTo("slow", 1) is based on opacity. I'd suggest you to use two classes:

.not-updated{ visibility: hidden; opacity: 0; height: 0px; border: 0px; }
.updated{ visibility: visible; opacity: 1; transition: opacity 2s ease-in-out; -moz-transition: opacity 2s ease-in-out; -webkit-transition: opacity 2s ease-in-out; }

You may toggle from the first to the second class and on transitionend you can remove the toggled class.

The snippet:

$('#updater').click(function() {
  $('.box.not-updated:first').toggleClass('not-updated updated').on('transitionend', function(e) {
      this.classList.remove('updated');
  });
});

.box{
    border: 1px solid black;
    width: 350px;
    height: 40px;
}

.not-updated{
    visibility: hidden;
    opacity: 0;
    height: 0px;
    border: 0px;
}
.updated{
    visibility: visible;
    opacity: 1;
    transition: opacity 2s ease-in-out;
    -moz-transition: opacity 2s ease-in-out;
    -webkit-transition: opacity 2s ease-in-out;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div id="box1" class="box">Box1</div>
<div id="box2" class="box not-updated">Box2</div>
<div id="box3" class="box">Box3</div>
<div id="box4" class="box not-updated">Box4</div>
<div id="box5" class="box not-updated">Box5</div>
<div id="box6" class="box">Box6</div>
<div id="box7" class="box not-updated">Box7</div>
<div id="box8" class="box">Box8</div>

<br>
<button id="updater">
    Click me
</button>

score 2 · Accepted Answer · answered Aug 12 '17 at 14:20

Although "display: none" does not remove the element from the DOM, it does remove it from the page layout, so it cannot be animated. You can first remove the class with your "display: none" and then do the animation. Something like this:

$('#updater').click(function() {
    $('#box7').removeClass('not-updated');

    setTimeout(function() {
    $('#box7').addClass('box-updated');
  }, 0);
});

Your fiddle updated: https://jsfiddle.net/f2561ncf/

Gareth Compton · Answer 4 · 2017-08-12T14:09:20.693

0

The problem is the box method. Try slideDown() to make the box appear slow.

For an example you have this!

var time = 1000;
$("#updater").click(function(){
    $("#box7").slideDown(time);
});

This will make it a lot easier to edit than the webkit suggestion! If youre aiming for a pure CSS approach, there is also W3Schools CSS Slow Hover

edited Aug 12 '17 at 14:09

answered Aug 12 '17 at 14:04

Gareth Compton

159
1
12

Transition when removing class with display: none

Trials

4 Answers4