Prosta animacja jQuery vs css

Question

Witam, Tworze prostą stronkę pod wordpressa i podczas tworzenia menu mam mały dylemat. Stworzylem animacje przesuwania strony i menu w jQuery (bo skoro już jest to czemu nie), ale zastanawiam się czy nie bardziej optymalnie byłoby w js zrobić tylko dodanie klas np otwarte do kluczowych elementów strony i na tym tworzyć animacje w css typu .otwarte nav .menu{ KOD }   ,  bez klasy   nav .menu{ KOD }

let navWidth = $(".menu").css("width");
let buttonWidth = $(".button").css("width");
let ulTransform = $(".menu ul").css("transform");

$(".button").click(function(){
	$('.menu').css('transform',"translateX(-"+navWidth+")");
	$('#page').css('transform',"translateX(-"+navWidth+")");
	$(this).fadeOut();
	$(this).css('transform',"translateX("+buttonWidth+")");
	$('.menu ul').css('transform',"translateX(0)");
});
$("#page").click(function(){
	$('.menu').css('transform',"translateX(0px)");
	$(this).css('transform',"translateX(0px)");
	$('.button').fadeIn()
	$('.button').css('transform',"translateX(0px)");
	$('.menu ul').css('transform',""+ulTransform+"");	
});

WERSJA KODU Z samą zmianą klas, reszta wyglądu animacji zrobiona w css dla body z klasą otwarte lub bez tej klasy
 

(function() {
	var $body = document.body
	, $przycisk = $body.getElementsByClassName('button')[0];

	if ( typeof $przyciskr !== 'undefined' ) {
		$przycisk.addEventListener('click', function() {
			$body.className = ( $body.className == 'otwarte' )? ' ' : 'otwarte';
		});
	}

}).call(this);

 

Answer 1

Witam,
jeśli chodzi o jQuery vs CSS to polecałbym CSS, kiedyś nawet zapytałem forumowiczów o bibliotekę jQuery:
https://forum.pasja-informatyki.pl/291980/jquery-korzystac-czy-tez-nie-korzystac
Jak już coś to polecam używać nowszej składni JS, czyli querySelector zamiast getElementsByClassName, deklaracja const lub let zamiast var, itp. Dziś JS posiada takie możliwości, że jQuery staje się praktycznie zbędna (zresztą jQuery to nic innego jak też JS).