Une introduction détaillée à la transition d'attribut de transition dans les éléments CSS3

黄舟

Libérer： 2017-05-21 15:58:14

original

2447 Les gens l'ont consulté

TransitionL'animation est la base de l'animation

Avant d'apprendre l'animationpropriété
Nous devons d'abord comprendre la propriété de transition transition

Transition

Regardons d'abord un petit exemple

<p class="demo"></p>

Copier après la connexion

.demo {    width: 100px;    height: 100px;    background-color: royalblue;}.demo:hover {    width: 200px;}

Copier après la connexion

De cette façon, lorsque mon curseur survole la démo pendant un instant
sa largeur devient 200px

Existe-t-il un moyen d'élargir lentement la largeur de l'élément lorsque notre curseur le survole
Avant CSS3, nous ne pouvions utiliser que le gênant jsscript
Mais maintenant il ne nous reste plus qu'à ajouter un attribut
pour atteindre notre objectif

.demo {    width: 100px;    height: 100px;    background-color: royalblue;    transition: width 1s; /*增*/}.demo:hover {    width: 200px;}

Copier après la connexion

transition. Sa fonction est de préciser que lorsque certains styles de vos éléments changent,
ceux-ci. les styles peuvent passer progressivement. Vers la valeur finale de la propriété

il s'agit d'une propriété composite
avec les sous-propriétés suivantes

transition- property : spécifie l'attribut CSS de transition ou de simulation dynamique
transition-duration : spécifiez le temps requis pour la transition
transition-timing-function : spécifiez transition fonction
transition-delay : Spécifiez le délai pour le début de l'occurrence

transition-property Nous pouvons écrivez quelle transition d'attribut nous voulons
Ou écrivez simplement le mot-clé pour tous les attributs de la transitiontous

La valeur de l'attribut de temps de gradient de durée de transition est "nombre + s"
Représente la transition en quelques secondes

transition-timing-function est une valeur d'attribut facultative, avec les valeurs facultatives suivantes :

linéaire
Transition linéaire, équivalente à Bézier courbe (0.0, 0.0, 1.0, 1.0)
facilité (par défaut)
Transition douce, courbe de Bézier équivalente (0.25, 0.1, 0.25, 1.0)
allègement
de lent à rapide, courbe de Bézier équivalente (0,42, 0, 1,0, 1,0)
assouplissement
de rapide à Lent, équivalent à la courbe de Bézier (0, 0, 0,58, 1,0)
facilité d'entrée
de lent à rapide à lent, équivalent à la courbe de Bézier (0,42, 0 , 0,58, 1,0)
step-start
équivaut à steps(1, start)
step-end
Équivalent à steps(1, end)
steps() :
Fonction échelon de deux paramètres. Le premier paramètre est un entier positif, spécifiant le nombre d'étapes de la fonction. La valeur du deuxième paramètre est start ou end, spécifiant le moment où la valeur de chaque étape change. Le deuxième paramètre est facultatif et la valeur par défaut est end.
cubic-bezier(num, num, num, num):
Type de courbe de Bézier spécifique, 4 valeursdoivent être dans l'intervalle [0, 1]

Nous n'utilisons pas la plupart d'entre eux. Les plus couramment utilisés sont probablement notre facilité et notre transition linéaire par défaut

le délai de transition est également une valeur d'attribut facultative
Si vous souhaitez retarder la transition, autrement dit si nous voulons nous arrêter un petit moment avant la transition
alors ajoutez le temps dont nous avons besoin pour retarder "nombre + s" à la fin de cet attribut composite

Cet attribut peut définir plusieurs attributs différents
Tout ce que nous avons à faire est de les séparer par des virgules

.demo {    width: 100px;    height: 100px;    background-color: royalblue;    transition: width 1s linear, 
                height 1s linear,
                background-color 2s 1s; /*改*/}.demo:hover {    width: 200px;    height: 200px;    background-color: lawngreen; /*改*/}

Copier après la connexion

Une fois que la souris quitte l'élément, l'élément revient en arrière

Une autre raison d'utiliser des attributs de transition au lieu de scripts est que
les méthodes de script qui modifient les styles de plusieurs éléments peuvent provoquer des conflits
La solution consiste à utiliser boolvariables pour verrouiller, c'est quand même très gênant
Notre transition n'a pas besoin d'être autant pris en compte
Les éléments ne s'influencent pas les uns les autres

Encore une chose à note, éléments La transition doit connaître les attributs spécifiques de début et de fin du style
Par exemple, la largeur dans notre exemple passe clairement de 100px à 200px

.demo:hover {    width: auto; /*改*/
    height: 200px;    background-color: lawngreen; /*改*/}

Copier après la connexion

et la largeur du style de suspension est modifiée vers auto
Nous avons constaté que lorsque le curseur survole l'élément, l'
attribut de largeur ne fait pas de transition

Attributs impliqués dans la transition

Bien sûr, tous les styles ne peuvent pas faire l'objet d'une transition
Par exemple, si vous souhaitez une transition <a href="http://www.php.cn/wiki/927.html" target="_blank">afficher<code><a href="http://www.php.cn/wiki/927.html" target="_blank">display</a>:block:bloc à display:inline-block
est impossible
Les attributs suivants participent à la transition