1
00:00:00,890 --> 00:00:06,150
Hola chicos, hoy vamos a hacer un tutorial sobre las transiciones, ¿vale?

2
00:00:06,389 --> 00:00:15,609
Es decir, esto va a explicar o va a demostrar o os va a enseñar cómo crear efectos de transición entre diferentes elementos, ¿vale?

3
00:00:15,750 --> 00:00:23,030
Esto es especialmente útil, por ejemplo, para enlaces o para aquellos elementos en los que queréis poner que haya algún cambio en el estilo

4
00:00:23,030 --> 00:00:28,690
una vez que hacéis clic sobre un... o que pasáis el ratón, ¿vale? sobre un elemento, ¿vale?

5
00:00:29,609 --> 00:00:33,229
Entonces, nos vamos a ir a nuestro editor.

6
00:00:33,969 --> 00:00:37,609
Yo ya me he creado un archivo que lo he llamado transiciones.html, ¿vale?

7
00:00:37,890 --> 00:00:44,490
Y como veis, pues mantengo la estructura que fijo siempre, que es la altura del 100%

8
00:00:44,490 --> 00:00:47,829
y un tipo de letra, en este caso yo tengo Arial, ¿vale?

9
00:00:47,829 --> 00:00:49,869
Y un tamaño a 125, ¿vale?

10
00:00:49,869 --> 00:00:59,250
Entonces, lo primero que vamos a hacer va a ser explicar cuáles son estas propiedades de transición, ¿vale?

11
00:00:59,310 --> 00:01:02,329
O cómo gestionar las transiciones, ¿vale?

12
00:01:02,710 --> 00:01:07,870
Porque realmente las transiciones tienen una única propiedad y simplemente lo que vamos a hacer es...

13
00:01:09,269 --> 00:01:12,969
Bueno, tienen varias propiedades asociadas al efecto de transición, ¿vale?

14
00:01:13,209 --> 00:01:14,909
Y lo que vamos a hacer primero es explicarla.

15
00:01:15,030 --> 00:01:18,870
Y lo voy a explicar utilizando comentarios dentro de la parte de estilo, ¿vale?

16
00:01:19,870 --> 00:01:29,310
Pues fijaros, pongo aquí transiciones y lo que vamos a definir o vamos a trabajar nosotros habitualmente con cuatro propiedades diferentes, ¿vale?

17
00:01:29,390 --> 00:01:37,489
La primera propiedad, y la voy a poner así, ¿vale? Va a ser transition property, ¿vale?

18
00:01:37,489 --> 00:02:07,469
Y esta propiedad puede tener tres valores principales. Ninguno, que sería el valor por defecto, es decir, no añadir ninguna transición. Todos o, cuando aquí pongo propiedad, estoy refiriéndome a qué le quiero hacer la propiedad, ¿vale?

19
00:02:07,469 --> 00:02:14,069
pongo height, la única propiedad que sufrirá esa transición será la propiedad altura,

20
00:02:14,229 --> 00:02:21,710
¿vale? Lo vamos a ver luego con un ejemplo. Luego vamos a tener otra propiedad que va

21
00:02:21,710 --> 00:02:30,740
a ser transition duration, ¿vale? Que aquí se pone simplemente el tiempo que queremos

22
00:02:30,740 --> 00:02:37,039
que dure esa transición. Luego vamos a tener transition delay, ¿vale? Que también se le

23
00:02:37,039 --> 00:02:47,539
Añade el tiempo, pero el delay aquí será desde que, por ejemplo, si estamos utilizando el hover, que recuerdo que es para que aplique el efecto cuando pasamos el ratón por encima, ¿vale?

24
00:02:47,780 --> 00:02:58,659
Si queremos, si pasamos el ratón, si nosotros ponemos un transition delay de dos segundos, pues cuando pasemos el ratón por encima pasarán dos segundos antes de que comience a hacer la transición, ¿vale?

25
00:02:58,659 --> 00:03:05,719
Y por último, que es el más particular, transition timing function, ¿vale?

26
00:03:05,719 --> 00:03:23,219
Y aquí podemos añadirle varios valores por defecto, ¿vale? Estos valores significan cómo se va a ejecutar esa transición, ¿vale? Es decir, si va a ser muy rápida al principio y lenta al final, si va a ser lineal, ¿vale?

27
00:03:23,219 --> 00:03:57,560
Va a tener muchas propiedades. Yo las voy a poner aquí y luego vamos a ir viendo algunas de ellas, pero esto ya es cuestión de gustos que cada uno trabaje con la que más le guste, ¿vale? Tenemos Linear, tenemos Is, tenemos Is In, ¿vale? Esto, por ejemplo, sería rápido al principio y lento al final. Is Out sería rápido al final y lento al principio, ¿vale? Is In Out, Step Start, Step End, ¿vale?

28
00:03:58,060 --> 00:04:03,099
Y luego tenemos también cubicVecier, ¿vale?

29
00:04:03,639 --> 00:04:07,900
En la que se le pone dentro de los paréntesis, cubicVecier.

30
00:04:09,080 --> 00:04:13,419
Se le pone aquí cuatro valores que representan cómo se hace esa variación, ¿vale?

31
00:04:13,699 --> 00:04:16,339
Entonces vamos a verlo con un ejemplo.

32
00:04:16,879 --> 00:04:24,339
Y para eso nos vamos a crear en la parte del cuerpo de nuestro HTML, nos vamos a crear un elemento div vacío, ¿vale?

33
00:04:24,459 --> 00:04:25,579
No va a tener nada.

34
00:04:25,579 --> 00:04:41,259
Y ahora nosotros aquí le vamos a dar propiedad a ese elemento dip. Lo vamos a convertir en una cajita, ¿vale? Con un color de fondo, background color, que va a ser en esa decimal 0080, ¿vale?

35
00:04:41,259 --> 00:04:54,459
Es decir, si os dais cuenta, cuando pongo el ratón encima va a ser un tipo verde. Le vamos a dar una anchura de 200 píxeles y una altura también de 200 píxeles, ¿vale?

36
00:04:54,459 --> 00:05:09,959
Ya estáis viendo aquí que me sale mi cuadradito verde, ¿vale? Perfecto. Y le vamos a poner también un margen de 90 píxeles por arriba y por abajo y de 0, y de auto, perdón, en los laterales para que no los centre, ¿vale?

37
00:05:09,959 --> 00:05:15,100
Recuerdo que cuando poníamos auto en los márgenes laterales nos lo centraba automáticamente, ¿vale?

38
00:05:16,540 --> 00:05:24,899
Y lo que voy a hacer es añadir aquí al mismo dip, pero con la pseudo propiedad, ¿vale?

39
00:05:24,980 --> 00:05:25,800
Hover, ¿vale?

40
00:05:25,920 --> 00:05:29,420
Que esto recuerdo que era para cuando pasamos el ratón por encima, ¿vale?

41
00:05:30,000 --> 00:05:36,819
Y vamos a coger estas tres primeras propiedades, las vamos a copiar y las vamos a pegar, ¿vale?

42
00:05:37,620 --> 00:05:39,259
Y simplemente las vamos a modificar.

43
00:05:39,259 --> 00:05:52,279
En el caso del color, va a pasar a tener un color amarillo, ¿vale? En la anchura va a pasar a tener 500 píxeles y en la altura 300 píxeles, ¿vale?

44
00:05:52,600 --> 00:06:03,639
Y aparte de eso, pues le vamos a poner un sombreado, ¿vale? Vamos a ponerle box shadow de 2 píxeles en el horizontal y vertical, 5 píxeles en el vertical,

45
00:06:03,639 --> 00:06:06,259
5 píxeles de difuminación

46
00:06:06,259 --> 00:06:09,360
Y le vamos a poner un color tipo gris

47
00:06:09,360 --> 00:06:10,019
¿Vale?

48
00:06:10,220 --> 00:06:11,079
Todo haces

49
00:06:11,079 --> 00:06:13,579
Entonces fijaros

50
00:06:13,579 --> 00:06:15,680
Si yo ahora paso el ratón por encima

51
00:06:15,680 --> 00:06:18,579
Al pasar el ratón por encima

52
00:06:18,579 --> 00:06:21,000
Se modifica nuestro elemento dip

53
00:06:21,000 --> 00:06:23,360
Y pasa a ser amarillo, más grande

54
00:06:23,360 --> 00:06:24,899
Con un sombreado

55
00:06:24,899 --> 00:06:27,079
Pero esto lo hace muy rápido

56
00:06:27,079 --> 00:06:27,379
¿Vale?

57
00:06:27,459 --> 00:06:29,120
Pues yo quiero que haya una transición

58
00:06:29,120 --> 00:06:31,620
Entre ese cuadradito rojo

59
00:06:31,620 --> 00:06:32,399
Verde, perdón

60
00:06:32,399 --> 00:06:50,060
Y este cuadrado amarillo, ¿vale? Entonces, para eso, me voy a venir aquí, en la clase hover, ¿vale? En la propiedad hover que he definido, y vamos a poner transition property, ¿vale? El primero que veíamos, ¿vale?

61
00:06:50,060 --> 00:06:58,259
Entonces, vamos a imaginarnos que yo ahora mismo solo quiero que se modifique, que tenga un efecto de transición el elemento de la anchura, ¿vale?

62
00:06:58,540 --> 00:07:03,980
Entonces pongo aquí width, ¿vale? Solo quiero que la anchura sea el que yo detecte esa transición.

63
00:07:04,779 --> 00:07:12,980
Le voy a poner también, se me ha olvidado el punto y coma, le voy a poner también una duración de 1,5 segundos, ¿vale?

64
00:07:12,980 --> 00:07:35,079
Le voy a poner un delay de un segundo, ¿vale? Y por último, le voy a poner una transition, lo que hablábamos antes, transition, timing function de easy, ¿vale? Es decir, rápido al principio y lento al final, ¿vale?

65
00:07:35,079 --> 00:07:56,470
Entonces, fijaros lo que pasa ahora. Si yo pongo el ratón encima, como le he definido un delay de un segundo, va a pasar un segundo hasta que comience el efecto. ¿Vale? ¿Habéis visto? Es decir, todo el efecto que no tiene que ver con width, es decir, la sombra, la altura y el color, ocurre instantáneamente.

66
00:07:56,470 --> 00:08:02,990
Pero en la anchura hay un efecto de transición donde se produce ese cambio, ¿vale?

67
00:08:05,160 --> 00:08:10,180
Si yo quisiera que esa propiedad afectara a todo, aquí pondría All.

68
00:08:10,439 --> 00:08:18,240
Al poner All, fijaros que yo ahora pongo el ratón encima y ese cambio se produce en completo de forma gradual, ¿vale?

69
00:08:21,089 --> 00:08:22,490
¿Qué más, qué más, qué más?

70
00:08:22,829 --> 00:08:28,850
Vale, si os dais cuenta, cuando quito el ratón, la transición se hace también de forma instantánea.

71
00:08:28,850 --> 00:08:39,549
Si yo quiero que esa transición también sea, también tenga un efecto de transición, pues lo único que haría sería copiarme todo esto y me lo llevo al elemento div, ¿vale?

72
00:08:40,610 --> 00:08:55,830
Y ahora fijaros que si yo pongo el ratón encima, se cambia de forma lenta al color amarillo con mayor anchura y altura, y si lo quito, también se cambia con un efecto de transición al siguiente elemento, ¿vale?

73
00:08:55,830 --> 00:09:06,570
Pues por último, simplemente deciros que yo puedo todas estas cuatro propiedades definirlas en una sola, ¿vale?

74
00:09:06,590 --> 00:09:09,110
La propiedad transition, ¿vale?

75
00:09:10,570 --> 00:09:21,710
Y simplemente pues pondría que quiero que afecte en todos los elementos, que dure 1,5 segundos, que tenga el efecto easy in, o en este caso voy a poner easy out, ¿vale?

76
00:09:22,070 --> 00:09:24,610
Y que tenga un delay de un segundo, ¿vale?

77
00:09:24,610 --> 00:09:48,669
¿Vale? Entonces fijaros que ahora cuando yo pongo el ratón, ¿vale? Funciona exactamente igual, ¿vale? Simplemente que lo he resumido todo en una única línea, ¿vale? Pues muy bien, espero que os haya gustado y que lo veáis provechoso. Nos vemos en el siguiente vídeo.