Maison > Article > interface Web > Quelles sont les méthodes de déclenchement de la transition CSS3 ?

Quelles sont les méthodes de déclenchement de la transition CSS3 ?

青灯夜游original: 2021-12-15 11:20:192799parcourir

La transition css3 a deux méthodes de déclenchement : 1. Déclenchée par des éléments de pseudo-classe, notamment ":hover", ":focus", ":checked", etc. 2. Déclenchée par JS, en utilisant du code js ou Jquery pour modifier Attributs CSS, déclenchant ainsi le dégradé de la transition.

L'environnement d'exploitation de ce tutoriel : système Windows7, version CSS3&&HTML5, ordinateur Dell G3.

transition

la transition est l'animation la plus simple en CSS3 Lorsque les propriétés d'un élément changent, il peut être présenté de manière dégradée. Le code suivant est un exemple de w3c. Le résultat de l'ajout d'une transition est celui du survol. , la longueur Il augmentera progressivement jusqu'à 300px.

<!DOCTYPE html>
<html>
<head>
<style> 
div
{
width:100px;
height:100px;
background:blue;
transition:width 2s;
-moz-transition:width 2s; /* Firefox 4 */
-webkit-transition:width 2s; /* Safari and Chrome */
-o-transition:width 2s; /* Opera */
}

div:hover
{
width:300px;
}
</style>
</head>
<body>

<div></div>

<p>请把鼠标指针移动到蓝色的 div 元素上，就可以看到过渡效果。</p>

<p><b>注释：</b>本例在 Internet Explorer 中无效。</p>

</body>
</html>

Méthode de déclenchement de transition CSS3

La première : déclenchement via des éléments de pseudo-classe, y compris le survol, le focus, la vérification, etc.

<style>
    .box{
        width: 100px;
        height: 100px;
        background-color: blueviolet;
        transition: width 1s linear .5s;
    }
    .box:hover{
        width: 400px;
    }
</style>

<p class="box"></p>

Mais en utilisation réelle , nous utilisons principalement JS ou Jquery pour modifier directement les propriétés, mais j'ai trouvé que cela n'était pas possible au travail.

Deuxième : Déclenché via JS

Si vous utilisez JS ou Jquery pour modifier directement les propriétés CSS

La méthode de déclenchement JS doit être que sa classe change afin que de nouveaux styles puissent être obtenus.

Je crois comprendre que l'élément doit être modifié pour le rendre différent afin qu'il puisse obtenir de nouveaux attributs. C'est le cas pour le déclenchement de pseudo-classe. Pour le déclenchement JS, il faudrait que sa classe change pour que de nouveaux styles puissent. être obtenu.

En ajoutant une nouvelle classe à p, faisant changer p et obtenir la classe, le gradient de la transition peut être déclenché.

<style>
    .box{
      width: 100px;
      height: 100px;
      background-color: blueviolet;
      transition: width 1s linear .5s;
    }
    .box1{
      width: 400px;
    }
</style>

<p class="box"></p>

<scrpit>
    setTimeout(() => {
      let element = document.getElementsByClassName(&#39;box&#39;)[0];
      element.classList.add(&#39;box1&#39;)

    }, 1) 
</scrpit>

(Partage de vidéos d'apprentissage : Tutoriel vidéo CSS)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

html5 jquery css css3 class JS 伪类 transition

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Il existe plusieurs types de positionnement CSS3Article suivant：Il existe plusieurs types de positionnement CSS3

Articles Liés

Voir plus