Menu

Transitions étranges en CSS sous Firefox [Résolu/Fermé]

hcp7kuz 233 Messages postés mardi 18 août 2015Date d'inscription 2 mai 2018 Dernière intervention - 8 mai 2017 à 18:20 - Dernière réponse : hcp7kuz 233 Messages postés mardi 18 août 2015Date d'inscription 2 mai 2018 Dernière intervention
- 9 mai 2017 à 16:25
Bonjour,

J'ai récemment remarqué que lorsque j'applique une transition dynamiquement en JS à un élément, la transition appliqué est étrange, j'obtiens quelque chose comme :

transition: all 1s ease 0s;

Le fait étant que "0s" se rajoute à la fin de la propriété.
Tout fonctionne très bien sous Chrome.

Mon code :
<input type="button" value="Ajouter marge" onclick="document.getElementById('text-transition').style.marginLeft = '100px';" />
<input type="button" value="Enlever marge" onclick="document.getElementById('text-transition').style.marginLeft = '0';" />
<input type="button" value="Ajouter transition" onclick="document.getElementById('text-transition').style.transition = 'all ease 1s';" />
<input type="button" value="Enlever transition" onclick="document.getElementById('text-transition').style.transition = 'none';" /><br />
<div style="display: inline-block; background-color: blue; width: 50px; height: 50px; margin-left: 0;" id="text-transition">Test</div>

Quelqu'un a une idée de la raison de ce rajout ? Car même si les transitions fonctionnent, tout ceci me parait étrange...

Merci pour votre aide,

hcp7kuz
Afficher la suite 

2 réponses

Pitet 2378 Messages postés lundi 11 février 2013Date d'inscription 2 février 2018 Dernière intervention - 9 mai 2017 à 12:16
0
Utile
Salut,

Il s'agit des valeurs par défaut de la propriété transition qui est une propriété raccourcie pour 4 autres propriétés : https://developer.mozilla.org/fr/docs/Web/CSS/transition

Bonne journée,
hcp7kuz 233 Messages postés mardi 18 août 2015Date d'inscription 2 mai 2018 Dernière intervention - 9 mai 2017 à 16:25
D'accord, je n'avais pas pensé qu'il pouvait y avoir d'autres propriétés, erreur de ma part, merci pour ton aide ^^