CODEWITHSUNDEEP
javascriptcsscss-transitions
Paweł Brewczynski
Paweł Brewczynski

Reputation: 2743

Fade out instantly and fade in with CSS3 transitions

I have problem.

I want to instantly fade out my square (after clicking a button) then afterwards, fade it in slowly with a delayed time.

This is my example fiddle:

http://jsfiddle.net/qFYL7/6/

I changed the class but i'm afraid it's not the proper approach:

 my_square.className  = 'dim_fast';
 my_square.className = 'square';

Thanks for any help given!

Upvotes: 2

Views: 7172

Answers (6)

SirGordon
SirGordon

Reputation: 33

It's 2018 and this solution works in edge, chrome, opera and firefox. Does'nt work in my IE11 though caniuse says IE11 has full keyframes support.

const fade = document.querySelector('.fade');
const cont = document.querySelector('.container');

document.body.addEventListener('click', ev => {
  if (ev.target.classList.contains('fade')) {
    cont.classList.add('fade-out-in');
  }
});

cont.addEventListener('animationend', ev => {
  cont.classList.remove('fade-out-in');
});
@keyframes fadeOutIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

.container {
  width: 200px;
  height: 200px;
  margin-top: 10px;
  background: red;
}

.fade-out-in {
  animation: fadeOutIn 1s;
}
<button class="fade">Fade 1</button>
<button class="fade">Fade 2</button>
<button class="fade">Fade 3</button>

<div class="container"></div>

Upvotes: 0

Ali Bassam
Ali Bassam

Reputation: 9959

HOW ABOUT A PURE CSS3 SOLUTION?

First you need to make sure that the button is positioned before the square.

<button id="bt1"> </button>
<div id="my_square" class="square"> </div>

This is because CSS doesn't have a "previous sibling" selector.

Now you must use the :active pseudo-element on the button, to directly hide the square.

#bt1:active + .square
{

    -webkit-transition:opacity 0s;
       -moz-transition:opacity 0s;
         -o-transition:opacity 0s;    
            transition:opacity 0s;
    opacity:0;
}

When you click the button, the square will instantly be hidden.

Now add the transition on the square.

.square
{

    -webkit-transition:opacity 2s;
       -moz-transition:opacity 2s;
         -o-transition:opacity 2s;
            transition:opacity 2s;
    opacity:1;
}

The Square will Fade In in 2 seconds.

CHECK IT OUT

Upvotes: 2

Bilal Fazlani
Bilal Fazlani

Reputation: 6967

There should be a way of doing it without jQuery (which I am not aware of).. but in case u decide use jQuery :

$(my_square).hide("fast").show("slow");

Upvotes: -2

Paulo R.
Paulo R.

Reputation: 15609

It's as simple as:

function dim_fast_shine_slow() {
    my_square.classList.toggle("dim_fast");
}

In your version you had: 

function dim_fast_shine_slow() {
    my_square.className  = 'dim_fast'; //changes class to dim_fast
    my_square.className = 'square'; // changes it back to square
}

In each click the element's class name will just end up being "square".

Upvotes: 0

Gabriele Petrioli
Gabriele Petrioli

Reputation: 195972

I would use animation for this instead of transitions

Altered CSS (from your jsfiddle)

.square
{
    width:100px;
    height:100px;    
    background-color:blue;
    opacity:1;
}
.fade{
    animation: dim_fast_shine_slow 1s;
}
@keyframes dim_fast_shine_slow{
    99%{opacity:0;}
    100%{opacity:1}
}

Altered script

var my_square = document.getElementById('my_square');

function dim_fast_shine_slow()
{
    // remove class
    my_square.className = my_square.className.replace(' fade','');
    setTimeout(function(){
        // add class after 50 millisecons to allow the DOM to register the removal of the class
        my_square.className  += ' fade';
    },50);

  }

 document.getElementById('bt1').onclick = dim_fast_shine_slow;

Demo at http://jsfiddle.net/gaby/qFYL7/7/

Upvotes: 0

nice ass
nice ass

Reputation: 16709

Well, in your function you're changing the class to dim_fast and then immediately back to square, which has no transitions :)

So, remove:

my_square.className = 'square';

Or at least append the 2nd class:

my_square.className = 'square dim_fast';

To fade out the square, and then fade in after an amount of time, you can use setTimeout. Example

Upvotes: 2

Related Questions