applying css transition multiple times

Question

I expected this to be simple, but I've been struggling.

I want to transition the visibility+opacity of .content to 0. (This works).

Then render it afresh on clicking the button (counter c=1), then transition its visibility+opacity of .content to 0. (This just doesn't work - I've even tried to 'neuter' the transition.

(JSFiddle here)

Thanks for the help.

    var c = 0;

    var $content = $('.content');


    $('.button').click(function() {
        $content
//                .removeClass('hidden-transition')
//                .addClass('neuter-transition')
//                .addClass('visible')
                .html('new stuff: ' + c)
                .removeClass('visible')
                .addClass('hidden-transition');
        c += 1;
    });

       .actionWrapper {
            width: 10em;
            background: cadetblue;
            color: white;

        }

        .content {
            padding: 1em;
            overflow: auto;
            height: 4em;
        }

        .button {
            background-color: lightsalmon;
            height: 2em;
            width: 5em;
            line-height: 2em;
            text-align: center;
            margin-top: 1em;
        }
        .button:hover {
            cursor: pointer;
        }


        .hidden-transition {
            visibility: hidden;
            opacity: 0;
            -webkit-transition: visibility 0s 5s, opacity 5s linear;
            -moz-transition: visibility 0s 5s, opacity 5s linear;
            -o-transition: visibility 0s 5s, opacity 5s linear;
            transition: visibility 0s 5s, opacity 5s linear;
        }

        .neuter-transition {
            -webkit-transition: none;
            -moz-transition: none;
            -o-transition: none;
            transition: none;    
        }
        
        .visible {
            visibility: visible;
            opacity: 1;
        }

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

<div class="button">click</div>

Rohan Kumar · Accepted Answer · 2015-09-04 07:02:15Z

You have 3 option for this

First Using Timeout like,

var c = 0;
var $content = $('.content');
$('.button').click(function () {
    var rmc = 'visible',
        adc = 'hidden-transition';
    if (c == 0) {
        setTimeout(function () {
            c = 0;
            adc = 'visible';
            rmc = 'hidden-transition';
            $content.html('new stuff: ' + c)
                .removeClass(rmc)
                .addClass(adc);
        }, 5000);
    }
    $content.html('new stuff: ' + c)
        .removeClass(rmc)
        .addClass(adc);
    c++;
});

var c = 0;
var $content = $('.content');
$('.button').click(function() {
  var rmc = 'visible',
      adc = 'hidden-transition';
  if (c == 0) {
    setTimeout(function() {
      c = 0;
      adc = 'visible';
      rmc = 'hidden-transition';
      $content.html('new stuff: ' + c)
      .removeClass(rmc)
      .addClass(adc);
    }, 5000);
  }
  $content.html('new stuff: ' + c)
  .removeClass(rmc)
  .addClass(adc);
  c++;
});

.actionWrapper {
  width: 10em;
  background: cadetblue;
  color: white;
}
.content {
  padding: 1em;
  overflow: auto;
  height: 3em;
}
.button {
  background-color: lightsalmon;
  height: 2em;
  width: 5em;
  line-height: 2em;
  text-align: center;
  margin-top: 1em;
}
.button:hover {
  cursor: pointer;
}
.hidden-transition {
  visibility: hidden;
  opacity: 0;
  -webkit-transition: visibility 0s 5s, opacity 5s linear;
  -moz-transition: visibility 0s 5s, opacity 5s linear;
  -o-transition: visibility 0s 5s, opacity 5s linear;
  transition: visibility 0s 5s, opacity 5s linear;
}
.neuter-transition {
  -webkit-transition: none;
  -moz-transition: none;
  -o-transition: none;
  transition: none;
}
.visible {
  visibility: visible;
  opacity: 1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="actionWrapper">
  <div class="content"></div>
</div>
<div class="button">click</div>

Second reset c when the button is clicked without waiting like,

var c = 0;
var $content = $('.content');
$('.button').click(function () {
    var rmc = 'visible',
        adc = 'hidden-transition';
    if (c >= 5) {
            c = 0;
            adc = 'visible';
            rmc = 'hidden-transition';                
    }
    $content.html('new stuff: ' + c)
        .removeClass(rmc)
        .addClass(adc);
    c++;
});

var c = 0;
var $content = $('.content');
$('.button').click(function() {
  var rmc = 'visible',
      adc = 'hidden-transition';
  if (c >= 5) {
    c = 0;
    adc = 'visible';
    rmc = 'hidden-transition';
  }
  $content.html('new stuff: ' + c)
  .removeClass(rmc)
  .addClass(adc);
  c++;
});

.actionWrapper {
  width: 10em;
  background: cadetblue;
  color: white;
}
.content {
  padding: 1em;
  overflow: auto;
  height: 3em;
}
.button {
  background-color: lightsalmon;
  height: 2em;
  width: 5em;
  line-height: 2em;
  text-align: center;
  margin-top: 1em;
}
.button:hover {
  cursor: pointer;
}
.hidden-transition {
  visibility: hidden;
  opacity: 0;
  -webkit-transition: visibility 0s 5s, opacity 5s linear;
  -moz-transition: visibility 0s 5s, opacity 5s linear;
  -o-transition: visibility 0s 5s, opacity 5s linear;
  transition: visibility 0s 5s, opacity 5s linear;
}
.neuter-transition {
  -webkit-transition: none;
  -moz-transition: none;
  -o-transition: none;
  transition: none;
}
.visible {
  visibility: visible;
  opacity: 1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="actionWrapper">
  <div class="content"></div>
</div>
<div class="button">click</div>

Third(I found it is the best from above 2) Referred from Detecting CSS Animation Completion with JavaScript

/* From Modernizr */
function whichTransitionEvent(){
    var t;
    var el = document.createElement('fakeelement');
    var transitions = {
      'transition':'transitionend',
      'OTransition':'oTransitionEnd',
      'MozTransition':'transitionend',
      'WebkitTransition':'webkitTransitionEnd'
    }

    for(t in transitions){
        if( el.style[t] !== undefined ){
            return transitions[t];
        }
    }
}
var c = 0;
var $content = $('.content');

/* Listen for a transition! */
var transitionEvent = whichTransitionEvent();
transitionEvent && $content.on(transitionEvent, function() {
    c=0;
	$content.html('new stuff: ' + c)
        .removeClass('hidden-transition')
        .addClass('visible');
});


$('.button').click(function () {
    $content.html('new stuff: ' + c)
        .removeClass('visible')
        .addClass('hidden-transition');
    c++;
});

.actionWrapper {
  width: 10em;
  background: cadetblue;
  color: white;
}
.content {
  padding: 1em;
  overflow: auto;
  height: 3em;
}
.button {
  background-color: lightsalmon;
  height: 2em;
  width: 5em;
  line-height: 2em;
  text-align: center;
  margin-top: 1em;
}
.button:hover {
  cursor: pointer;
}
.hidden-transition {
  visibility: hidden;
  opacity: 0;
  -webkit-transition: visibility 0s 5s, opacity 5s linear;
  -moz-transition: visibility 0s 5s, opacity 5s linear;
  -o-transition: visibility 0s 5s, opacity 5s linear;
  transition: visibility 0s 5s, opacity 5s linear;
}
.neuter-transition {
  -webkit-transition: none;
  -moz-transition: none;
  -o-transition: none;
  transition: none;
}
.visible {
  visibility: visible;
  opacity: 1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="actionWrapper">
    <div class="content"></div>
</div>
<div class="button">click</div>

You can read more about css animation callback here

Thanks Rohan. In your examples, when it is fading out for c=1, and then we invoke c=2, it doesn't start from opacity = 1. Any suggestions/directions on how to do that ?
You can do by adding $content.css('opacity',1); in your button click event

Collectives™ on Stack Overflow

applying css transition multiple times

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related