I've been experimenting with .slideToggle() in jQuery to toggle a hidden div from display: none to display: grid. However, it seems like this animation is forcing display: block inline onto the HTML and overriding any other CSS classes.
CSS
.grid {
display: grid;
}
jQuery
$('#nav-toggle').click(function() {
$('.nav-menu').slideToggle(500, function() {
$(this).toggleClass('grid')
});
});
I managed to find some success by using
$('#nav-toggle').click(function() {
$('.nav-menu').slideToggle(500, function() {
if ($(this).is(':visible')) {
$(this).css('display','grid');
}
});
});.nav-menu {
display: none;
grid-template-columns: repeat(3, 1fr);
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id=nav-toggle>
Toggle
</div>
<div class=nav-menu>
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
</div>However, during the initial animation, it still shows using display: block, and only after the animation finishes does jQuery recognize the element as visible and switch it to display: grid.
Subsequent animations work smoothly with display: grid. Is there a way to make the initial animation display correctly too?