javascript - Fade out instantly and fade in with CSS3 transitions - Stack Overflow

admin管理员组

文章数量:1416623

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:

/

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!

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

• javascript
• css
• css-transitions

Share Improve this question Follow edited Feb 24, 2013 at 13:57 kabuto178 3,16744 gold badges4545 silver badges6767 bronze badges asked Feb 24, 2013 at 13:51 Paweł BrewczynskiPaweł Brewczynski 2,74333 gold badges3232 silver badges4646 bronze badges 2

• jsfiddle/qFYL7/9 > take a look – Paulo R. Commented Feb 24, 2013 at 14:18
• I wanted fade in slowly (not fade out). – Paweł Brewczynski Commented Feb 24, 2013 at 14:22

Add a ment  | 

6 Answers 6

Sorted by: Reset to default 2

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

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

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/gaby/qFYL7/7/

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

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>

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");

本文标签： javascriptFade out instantly and fade in with CSS3 transitionsStack Overflow