CODEWITHSUNDEEP
javascriptjquerytransition
J0ANMM
J0ANMM

Reputation: 8551

Transition when removing class with display: none

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?

Upvotes: 4

Views: 4147

Answers (4)

Cristiano Correia
Cristiano Correia

Reputation: 46

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/

Upvotes: 2

Gareth Compton
Gareth Compton

Reputation: 149

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

Upvotes: 0

gaetanoM
gaetanoM

Reputation: 42054

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>

Upvotes: 2

Shiladitya
Shiladitya

Reputation: 12161

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.

Upvotes: 2

Related Questions