javascript - Transition when removing class with display: none - Stack Overflow

admin管理员组

文章数量:1332394

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?

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?

• javascript
• jquery
• transition

Share Improve this question Follow asked Aug 12, 2017 at 13:35 J0ANMMJ0ANMM 8,5511010 gold badges6666 silver badges9595 bronze badges 2

• 1 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 Commented Aug 12, 2017 at 13:37
• Also note that transitions don't work on the display property – adeneo Commented Aug 12, 2017 at 13:45

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 2

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/f2561ncf/

This might help you with @keyframes https://jsfiddle/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./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/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./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.

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./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>

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

本文标签： javascriptTransition when removing class with display noneStack Overflow