我正在使用 Cordova 制作一个应用程序，它使用 jQuery 效果，即淡入淡出。在我的安卓设备上效果非常慢。我想将它们转换为 CSS，并且我看到了使用 toggleClass 等实现的方法。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$(document).ready(function($) {
$( "#fade" ).click(function() {
$('#fader').toggleClass('fadeout');
});
$('#fader').on('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(e) {
$('#fader').toggleClass('hide');
});
setTimeout(500)
});
</script>
<style>
div{
background-color: blue;
}
#fader{
display: block;
opacity: 1;
-webkit-transition: opacity 0.35s linear;
-moz-transition: opacity 0.35s linear;
-ms-transition: opacity 0.35s linear;
-o-transition: opacity 0.35s linear;
transition: opacity 0.35s linear;
}
#fader.fadeout{
opacity: 0;
}
#fader.fadeout.hide{
display: none;
}
</style>
</head>
<body>
<div id="fader">
css
</div>
<br>
<br>
<div id="fade">
DivButton
</div>
</body>
</html>
但是我遇到了两个问题:
问题 1
在使用 jQuery fadein 时，最后将显示设置为无。同样，在使用淡出时，它会删除 display:none 属性。动画也很突然。我如何在 CSS 中做到这一点？
第 2 期
我想在 CSS 中使用延迟函数以及淡入淡出。我怎样才能做到这一点？
请大家帮忙
提前致谢。
最佳答案
display:none; 会突然移除方 block ，因此您可能还想为高度设置动画。
下面是一个 CSS 转换的例子:
$(function() {
$(".toggle-fade").click(function() {
$(".block").toggleClass('hidden');
});
});.block {
background:red;
height:300px;
width:300px;
visibility:visible;
opacity:1;
transition:2s;
-webkit-transition:2s;
transition-delay:1s;
-webkit-transition-delay:1s;
}
.block.hidden {
visibility:hidden;
height:0px;
opacity:0;
overflow:hidden;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="block">
</div>
<button class="toggle-fade">Toggle block</button>关于css 中的 jQuery fadein 淡出效果，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32679613/