I'm currently developing an app using Cordova and incorporating jQuery effects like fadein and fadeout. However, I've noticed that these effects are quite slow on my android device. To address this, I'm considering converting them to CSS and have come across methods using toggleClass, etc.
<!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>
However, I've encountered two main issues:
Problem 1
When using jQuery fadein, it ultimately sets the display to none. Likewise, with fadeout, it removes the display: none property. Additionally, the animations are quite abrupt. Is there a way to achieve this smoothly using CSS?
Problem 2
I'm interested in incorporating a delay function along with the fadein and fadeout in CSS. How can I go about achieving this?
Any assistance would be greatly appreciated.
Thank you all in advance.