我正在添加一个类来淡化一些文本。在此处查看基本 fiddle :http://jsfiddle.net/Lg8rp0fo/
HTML
<p class="fadeup">some text here</p>
CSS 。去 { 过渡:全部250ms线性; 变换:平移Y(-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++;
}
我想稍后删除该类并让内容再次淡出/淡入。目前,它只是重新出现,没有转换/翻译。
如何通过转换/翻译让它重新出现?
最佳答案
将 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
类,因此当它被删除时,转换也会被删除。
关于jquery - 添加和删除类时控制转换,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41507164/