我正在使用Cordova制作一个应用程序，它使用jQuery效果，即fadein和fadeout。在我的android设备上效果非常慢。我想把它们转换成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。类似地，在使用fadeout时，它会删除display：none属性。动画也是突兀的。如何在CSS中做到这一点？
问题2
我想在CSS中使用延迟函数和fadein和fadeout。我怎样才能做到呢？
请帮帮伙计们。
提前道谢。
display:none；会突然删除该块，因此您可能还需要对高度进行动画化。
下面是CSS过渡的一个示例：
null
$(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>