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

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

1 个答案: