Salut, tout le monde.
Dans cette conférence, nous allons parler des transitions.
Vous avez vu dans différents exemples que nous pouvons changer l'état des éléments.
Les liens peuvent aller du lien régulier à visité.
Vous pouvez survoler les choses.
Vous pouvez les concentrer.
Eh bien, et si vous voulez vraiment avoir un peu d'animation
quand vous faites ces choses ?
C' est pour cela que nous pouvons utiliser les transitions.
Donc, si vous passez le curseur sur le lien, vous pouvez changer la couleur.
Si une image est mise au point,
ce qui signifie que vous y avez inséré un onglet, vous pouvez modifier la taille.
Et ce sont juste ces petites choses qui parfois,
quand vous faites votre page, vous donne ce petit facteur cool
que vous cherchez, pour montrer que vous commencez vraiment à saisir ces concepts.
Alors commençons.
Si vous souhaitez ajouter des transitions à votre page,
il y a quatre propriétés que vous voulez consulter.
Le premier est la propriété de transition réelle.
Qu' est-ce que vous voulez changer ?
Voulez-vous changer la taille, la couleur, la position, tous ?
Qu' en est-il de la durée de transition ?
Combien de temps chaque transition devrait-elle durer ?
Ils peuvent arriver très rapidement, où les gens ne le remarquent presque même pas, ou
cela peut être vraiment long et tiré.
Le timing de transition est, c'est un peu bizarre, mais c'est cette idée de,
si vous voulez faire quelque chose de plus grand, voulez-vous le rendre lentement plus grand et
linéaire tout en même temps ou voulez-vous qu'il soit plus facile ou plus facile ?
Vous pouvez changer comment, quel genre de vitesse il fait les différentes choses.
Le délai de transition est, voulez-vous que j'attende,
le navigateur doit-il attendre avant de commencer la transition ?
Si quelqu'un est en vol stationnaire, veux-tu qu'il passe deux secondes avant de continuer ?
Vous voudrez peut-être penser à cela, parce que parfois quand
les gens regardent votre page, ils ont, juste fait passer la souris partout.
Et vous ne voulez pas qu'ils regardent les transitions à moins qu'ils aient vraiment besoin de
se concentrer sur cet élément.
D' accord.
Alors allons-y et commençons.
Si vous voulez utiliser des transitions, la première chose que vous devez faire est
exactement ce que vous avez fait depuis le début, définissez votre élément et
dites le style que vous voulez qu'il ait lorsque vous chargez la page pour la première fois.
Ensuite, vous voulez choisir les éléments que vous souhaitez effectuer la transition.
Vous pouvez donc l'avoir stylisé avec la couleur de fond, la couleur, la largeur et la hauteur.
Vous ne voulez pas nécessairement changer toutes ces choses
lorsque vous entrez dans votre transition.
Alors choisissez ceux que vous voulez changer.
Troisièmement, définissez les nouvelles valeurs pour ces éléments.
Et c'est important.
Vous devez combiner cette étape avec une pseudo-classe.
Il doit être accompagné d'un vol stationnaire ou d'une mise au point ou d'un actif.
Alors regardons un code juste à l'écran, et
puis je vais vous exécuter à travers un exemple réel.
Donc, ici, je suis allé, je suis allé de l'avant et défini un div pour juste avoir la couleur, l'
arrière-plan, la hauteur de la ligne, la hauteur de la largeur, toutes les choses typiques.
Si vous remarquez, le rayon de la bordure est assez petit.
Ce n'est que six pixels.
Ensuite, je suis entré et j'ai dit, vous savez quoi, je vais aller de l'avant et
définir chacune de ces propriétés.
Donc, mes propriétés que je veux modifier seront la couleur, la largeur, l'arrière-plan
et le rayon de bordure.
C' est un peu beaucoup, mais je voulais un grand exemple.
Vous pouvez dire, je veux que ça prenne une demi-seconde,
je veux que tout soit à peu près le même changement, et
je veux que vous attendiez une demi-seconde avant de commencer cette transition.
La dernière étape, celle qui avait à voir avec la pseudo-classe,
était d'ajouter le div:hover et de donner les nouvelles valeurs que je veux que tout soit.
Donc, au lieu d'être noir, je veux le changer en blanc.
Au lieu de la largeur étant de 250 pixels, je veux qu'il soit 350,
couleur d'arrière-plan différente, et un rayon de bordure beaucoup plus grand.
D' accord ? Alors allons de l'avant et
regardons un exemple que j'ai.
J' ai déjà codé pour te montrer.
Donc, dans cet exemple, j'ai utilisé une feuille de style interne,
en partie parce que la majeure partie de mon HTML est juste ici.
Tout ce que j'ai est un div.
Comment je l'ai stylé est de dire que pour l'instant quand quelqu'un passe au-dessus de cette div,
je veux que vous changiez la couleur avec l'arrière-plan et le rayon de bordure.
Et j'ai aussi mis en actif,
juste parce que je voulais vous montrer que vous pouvez faire plusieurs états différents.
Active, si vous l'avez fait, peut-être ne vous souvenez pas, est quand vous cliquez sur un état.
Alors jetons un coup d'oeil.
Voici ma transition, juste par défaut, lorsque vous regardez la page.
Maintenant, quand je souris dessus,
vous pouvez voir que c'est une sorte de changement de couleur et de rayon de bordure cool. Le
rayon de la bordure peut changer les choses de l'apparence d'un carré
à celle d'un cercle.
La dernière est maintenant que je vais maintenir la souris enfoncée et
nous allons voir ce qui se passe quand l'état devient actif.
Vous pouvez voir, une fois de plus, j'ai changé toutes ces choses.
En fait, je pense que c'est plutôt cool.
Cela peut aussi être très distrayant.
Vous voulez donc utiliser les transitions avec parcimonie
pour vous assurer que vous n'enlevez pas les choses de votre page.
Il est possible et
très courant d'utiliser le raccourci lorsque vous écrivez vos différentes transitions.
Au lieu d'écrire la durée de transition
, les propriétés, différentes choses comme ça, vous pouvez tout mettre en une seule ligne.
Celui-ci dit que je veux changer l'arrière-plan, cela devrait prendre .2 secondes, et
je veux me détendre ou je veux que ce soit une transition linéaire.
Ici, il dit que je veux aller de l'avant et changer le rayon de la frontière, combien de temps cela
devrait prendre, le type de transition, et combien de temps vous voulez retarder.
Donc, quand vous regardez le code des autres,
ne soyez pas confus si cela ne ressemble pas à mon premier exemple.
Ils ont probablement utilisé les raccourcis.
D' accord.
Donc j'espère que c'était un peu cool et vous êtes excité d'aller
implémenter une sorte de transitions sur votre page.
Jouer avec eux fera également plus que faire de votre site un aspect
coloré et actif.
Cela va vous donner de la pratique sur la compréhension de ces différents
pseudo-classes et états tels que actifs, focus, hover, etc.
Mais rappelez-vous que l'accessibilité sera toujours un problème
lorsque vous traitez avec différents états sur la page.
Ne pas exiger que les gens vont passer le curseur sur votre page.
Ne pas exiger que les gens vont passer par l'onglet.
Vous voulez vous assurer que tout votre contenu est toujours disponible, et
gardez simplement ces transitions pour quelque chose d'un peu plus à ajouter à votre site.
Bonne chance.