添加和删​​除类时控制转换

Question

我正在添加一个类来淡化一些文本。在此处查看基本小提琴：http://jsfiddle.net/Lg8rp0fo/

HTML

<p class="fadeup">some text here</p>

CSS 。走 { 过渡：全250ms线性； 变换：translateY（-20px）； 不透明度：0； }

JS/JQuery

var i = 0;

document.body.onkeyup = function(e) {
  if( e.keyCode == 32 && i == 0 ) {
        $('.fadeup').addClass('go');
  } else if( e.keyCode == 32 && i == 1 ) {
    $('.fadeup').removeClass('go');
  }
    i++;
}

我想稍后删除课程并让内容再次淡入/淡入。目前，它只是重新出现，没有过渡/翻译。

如何通过转换/翻译让它重新出现？

Answer 1

将 CSS 过渡添加到 .fadeup 类：

//switched to click for demo
document.body.onclick= function(e) {
    $('.fadeup').toggleClass('go');
}

.go {
  transform: translateY(-20px);
  opacity: 0;
  color: red;
}
.fadeup {
  margin-top: 100px;
  text-align: center;
  transition: all 250ms linear;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p class="fadeup">
  some text here
</p>

问题是您将过渡添加到 go 类，因此当它被删除时，过渡也会被删除。

Updated JSFiddle