page transition in wordpress

add_filter( 'wp_head', function ( ) { ?>
<style>
body {
display: none;
}
	</style>
<?php });

add_filter( 'body_class', function( $classes ) {
	return array_merge( $classes, array( 'opacity' ) );
} );
add_filter( 'wp_footer', function ( ) { ?>
	<style>
body {
	-webkit-transition: 1s all ease-out;
	-moz-transition: 1s all ease-out;
	-ms-transition: 1s all ease-out;
	-o-transition: 1s all ease-out;
	transition: 1s all ease-out;
}

body.opacity {
	-webkit-transition: 0s all ease-out;
	-moz-transition: 0s all ease-out;
	-ms-transition: 0s all ease-out;
	-o-transition: 0s all ease-out;
	transition: 0s all ease-out;
	opacity: 0;
}
.nice_page_transition_opacity {
	opacity: 0;
}

</style>

<script>
	
jQuery(document).ready(function(){

	jQuery('a:not([href^=\\#])').click(function(){

		jQuery('body').addClass('nice_page_transition_opacity');

		setTimeout(function(){ jQuery('body').removeClass('nice_page_transition_opacity'); }, 2000);

	});
    jQuery('body').css("display", "block");
	setTimeout(function(){ jQuery('body').removeClass('opacity'); }, 1000);

});
</script>
<?php } );