Je suis nouveau dans HTML5, CSS et JavaScript, et surtout je viens de jouer.
Ce que je veux faire, c'est de définir et de déclencher une transition d'un div. Une fois la page chargée, je parviens à le faire en définissant une transition. Mais cela ne se sent pas très dynamique et ne semble pas la bonne façon d'y aller. Je suis reconnaissant pour toute aide
3 Réponses :
Peut-être quelque chose comme ceci:
Merci pour la réponse! Bien que rien ne se passe lorsque je remplace ma ligne de code avec votre code. Des idées? Je suis sur le navigateur Web Safari
Vérifiez la console de débogage pour des erreurs. Avez-vous ajouté la ligne dans votre fonction de surcharge?
Aucune erreur, j'utilise l'inspecteur Web de Safari et la console d'erreur. Ouais, je n'ai remplacé que le document.getelementByID ("Delepoinger"). Style.WebKitTransform = "Tourner (110deg)"; avec document.getElementyID ("DIALPONTER"). Nom de classe + = "DoLoLoLo";
Vous pouvez ajouter votre classe à l'élément chaque fois que vous souhaitez utiliser le JavaScript suivant: ou sans doute mieux, si vous souhaitez garantir un support croisé, en utilisant jQuery comme ceci: edit: voir violon ici que j'ai testé en chrome et safari sous Windows. Je devais commenter le code de transition dans le style don_point de la classe . J'ai également remplacé votre image d'arrière-plan avec un remplissage pour le faire fonctionner dans le violon.
Vous avez besoin d'un espace au début de la chaîne lors de l'ajout de la classe ou ne fonctionnera pas s'il y a déjà une autre classe.
Ahha! joli! Pourrait-il être alors que cela ne peut pas transition, si la div est déjà tournée?
On dirait que vous pouvez le faire pivoter au point que vous souhaitez initialement, puis animer la rotation tant que la rotation initiale est définie dans une classe: jsfiddle.net/jvpmq
La manière dont vous déclenchez des transitions consiste à faire correspondre un élément correspondant au sélecteur CSS. Le moyen le plus simple de faire est d'attribuer votre transition à une classe, puis ajoutez cette classe à l'aide de JavaScript. Donc, dans votre exemple: et votre élément choisi animera. (J'ai utilisé des normes complimenter JavaScript pour cela, mais cela ne fonctionnera pas sur les navigateurs plus âgés, alors je vous laisserai à vous de faire ce travail). P> Pour l'obtenir à la page Chargez, mettez-le dans un événement de charge: P> window.addEventListener('load', function () {
document.getElementById('dialPointer').classList.add('didLoad');
});
Merci pour la réponse, j'ai essayé de remplacer le document.getElementByID ("Delepoinger"). Style.webkitTransform = "Tourner (110deg)"; avec document.getElementeyid ('Delepoinger'). Classlist.add ('Didloa D'); Mais alors rien ne se passe, pourrait être parce que j'utilise Safari?
Je pensais avoir assigné une transition à la classe puis chargée. Sinon, pourriez-vous s'il vous plaît me montrer comment faire ça?
Qu'essayez-vous de dire que vous voulez appeler la classe puis chargez une fois? Voulez-vous la mettre en œuvre ou le transformer? En JavaScript, vous ne pouvez pas "appeler" une classe HTML ...?
Okey, alors veux que je veux faire est de faire mon div avec un arrière-plan img, tournez après avoir chargé la page. Mais il semble étrange que je doive déclarer la transition dans le corps. Donc, je veux déclencher une transition déjà déclarée sur ma div. En outre, je suis sur le navigateur Safari.