Transformation CSS: translateX à partir de JavaScript
Comment pourrais-je accéder et modifier transform: translateY(0px); en utilisant l'objet style de JavaScript, dans une affaire similaire à div.style.background = 50px.
J'essaie de faire en sorte qu'un en-tête sur ma page Web disparaisse lorsque l'utilisateur défile vers le bas mais div.style.tranform ou div.style.translate ne semble pas fonctionner.
Vous pouvez transmettre n'importe quelle propriété de transformation sous forme de chaîne.
COMMENT?
Cela peut être fait comme ça;
div.style.transform = "translate(x,y)"
Je découvre que si j'écris
div.style.transform = "translate(someValue)"
Elle n'affecte que les axes x.
"translate-y(someValue)" or "translate-x(someValue)"
n'a pas fonctionné.
Ou vous pouvez utiliser la propriété de rotation;
div.style.transform = "rotate(50px)".
Essayez!
En plus de la réponse acceptée, il est également possible de cibler chaque axe séparément - comme dans l'exemple suivant:
div.style.transform = "translateY(10px)";
Encore une fois, la valeur entre parenthèses peut être tout ce qui fonctionnerait autrement si elle était spécifiée directement dans CSS.
Solution alternative:
div.setAttribute('transform','translateY(10px)');