javascript - Comment créer des effets de transition avec JS?

Question

Je ne connais pas très bien js, alors laissez-moi vous demander, si j'utilise js pour cliquer sur un bouton, puis que le div se déplace à 500 pixels à droite après 5 secondes, quelle est l'idée de créer cet effet ? Dois-je d'abord écrire une classe pour obtenir tous ces effets, puis utiliser js pour changer le nom de classe ? Mais lors d'un événement de clic...

PHP中文网 · Answer




 





注意：该实例无法在 Internet Explorer 9 及更早 IE 版本上工作。


    
        

    
鼠标移动到 p 元素上，查看过渡效果。

Je vais vous faire une démo simple et vous le saurez. Ce n’est qu’une des méthodes, il y en a bien d’autres !

伊谢尔伦 · Answer

Est-ce ce que tu veux ? Voir le code ci-dessous. p se déplace vers 500px en 5s. Vous pouvez d'abord définir l'effet de transition pour p et ajouter une classe qui se déplace vers la droite. Ce que js fait principalement, c'est ajouter une classe à l'élément

.

ps : C'est juste un code de démonstration, sans tenir compte de la compatibilité, etc...

css3

.demo{
    border:1px solid #fff;
    width:100px;
    height:50px;
    position:relative;
    left:0;
    transition: left 2s;
}
.run{

    left:500px;
}

(function(){
    document.getElementsByClassName('demo')[0].onclick = function(){
        this.className +=' run';
    };
})()

女神的闺蜜爱上我 · Answer

Vous pouvez utiliser du CSS ou écrire directement en js. Pour CSS, utilisez la transition pour l'écrire. Pour Baidu spécifiquement, lorsqu'un événement de clic se produit, ajoutez une classe à l'élément et modifiez le style. Pour js, utilisez settimeout, prenez la marge gauche que vous avez mentionnée comme exemple, modifiez la marge gauche petit à petit et arrêtez-vous lorsqu'elle atteint la valeur spécifiée, qui est cleartimeout

代言 · Answer

Comme mentionné ci-dessus, s'il s'agit d'une version ie9 ou inférieure, vous devez utiliser une minuterie

var ele = document.getElementsByClassName('demo')[0]
ele.onclick = function(){
    var btn = this;
    setInterval(function(){
        btn.style.left = parseInt(btn.style.left) + 1 + "px"
    },1)
}

習慣沉默 · Answer

Habituellement, css3 est utilisétransition实现过渡效果，要动画的话用animation L'utilisation de js nécessite plus de performances. Voici quelques articles de référence

.

typecho · Answer

Propriétés CSS3D