jquery - 多次应用 css transition

Question

我原以为这很简单，但我一直在努力。

我想将 .content 的可见性+不透明度转换为 0。(这有效)。

然后在单击按钮时重新渲染它(计数器 c=1)，然后将其 .content 的可见性+不透明度转换为 0。(这只是不工作 - 我什至试图“中性”过渡。

(此处为 JSFiddle)

感谢您的帮助。

    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>

Answer 1

你有3个选择

首先使用超时，例如，

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>

第二次重置 c 当按钮被 clicked 时无需等待，

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>

第三(我发现它是上面2中最好的)引用自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>

您可以阅读更多关于 css animation callback here 的信息