Gerer une animation / transition

Bonjour,
Je tente de gérer une animation au changement de pages. J’utilise animate.css pour des effets que je trouve sympa.
J'ai intégrer l'effet comme ceci :

$('.mainContent').addClass('animated bounceInLeft');
	 
		$("a.animBlog").click(function(event){
			event.preventDefault();
			linkLocation = this.href;
			$('#sidebar').toggleClass('active');
			$('.mainContent').addClass('animated bounceOutRight').delay(500);
			$(".mainContent").delay(500, redirectPage);
		
		});

Comment puis-je jouer un effet différent lorsque je clic sur un lien différent. J'ai tenté cela, mais sans succès :

$("sidebar ul li a").click(function(event){
			if($(this).hasClass('animBlog')){
				console.log('je joue le code de dessus'); 
			}
			if($(this).hasClass('animContact')){
				console.log('je joue le code de dessus avec effet différrent'); 
			}
		});

Cette solution ne fonctionne pas
Si vous avez une piste, je suis preneur
Merci à +

Hello

La logique du code me semble correcte, mais je pense que tu as fait une erreur dans ton sélecteur jquery. Je pense que sidebar est une classe ou un id. Donc $('sidebar ul li a') devrait ?tre soit $('.sidebar ul li a') ou $('#sidebar ul li a'). Y a t- il des messages d'erreur dans la console?

Salut,
J'ai mal recopié mon code, mais oui le selecteur est opérationnel, le code est le suivant :

$('#sidebar ul li a').

Lorsque je test, le message de la console apparaît bien, mais lorsque je copie/colle tout le code, à savoir celui ci :

                      $('.mainContent').addClass('animated bounceInLeft');
	 		$("a.animBlog").click(function(event){
			event.preventDefault();
			linkLocation = this.href;
			$('#sidebar').toggleClass('active');
			$('.mainContent').addClass('animated bounceOutRight').delay(500);
			$(".mainContent").delay(500, redirectPage);
		
		});

Rien ne se passe....
:/

Quel est le message de la console ?

Salut...J'ai avancé (enfin presque...)
J'ai pas de message d'erreur...
En fait c'est normal je pense...Comme le lien renvoi sur une autre page je pense que le script commence mais n'a pas le temps de finir et la page cible est chargée...

En fait je souhaite avec animate.css faire un bounceOutRight de la page que l'on quitte et un bounceInLeft de la nouvelle page.

Mon code pour le bounceOutRight :

$("#sidebar ul li a").click(function(event){			
			if($(this).hasClass('animBlog')){
				$('#sidebar').toggleClass('active');
				$('.hamburger').toggleClass('is-active');
				
				event.preventDefault();
				linkLocation = this.href;
				
				var animationName = 'animated bounceOutRight';
				var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
				
				$('.mainContent').addClass( animationName ).one(animationEnd, redirectPage);
				
				function redirectPage() {
					
					$('.mainContent').removeClass( animationName );
					window.location = linkLocation;
				
				}
			}
		});

Du coup après la fonction redirectPage je me retrouve sur la page chargée. Comment puis je faire pour lancer bounceInLeft avec un semblant de continuité ?

Désolé pour la réponse tardive..

++

Une petite idée d un spécialiste ppyr me mettre sur la voie?
:)