Saltar navegación

Activa JavaScript para disfrutar de los vídeos de la Mediateca.

Back end Vs Front end - Vídeo 24 - Contenido educativo

Ajuste de pantalla

El ajuste de pantalla se aprecia al ver el vídeo en pantalla completa. Elige la presentación que más te guste:

Subido el 31 de julio de 2024 por Mario S.

54 visualizaciones

Trabajando con Animaciones del Tailwind

Más información Transcripción

Descargar la transcripción

well in this video we are going to see and the animations that the tailwind provides us and it is the 00:00:01
last video that I am going to do of what is relevant to the tailwind and we are going to continue doing our 00:00:12
development of the backend and the front ok then here we are going to see the animations if you look 00:00:19
en la página que vamos haciendo las pruebas que vamos haciendo pues aquí le he metido bueno 00:00:26
cambié el napar del último vídeo vale le cambia el color le redondeado y algunas cosillas y le 00:00:34
he metido animaciones bueno pues estas animaciones me las está proporcionando el propio 00:00:44
tailwind if we go to the documentation we see that in transitions and animations 00:00:53
here there are several options, it is worth as to put a delay at the time of 00:01:02
look at how here I have only put it to register as that young man that change of color takes 00:01:11
more than in these that I have not put it ok this is automatic here it makes that effect of the file 00:01:21
the father and it is worth that it is always like more beautiful it is worth softer more beautiful we are going to put it here 00:01:28
ok look ok here I put a young man and I put another good animation we have different 00:01:37
animations this is the pin, it is worth that it is going up and down all the time I have these 00:01:45
animations here it is worth spin that would be that it is spinning in the form of spin the one of the pin the one of the 00:01:52
pulse is worth the one of the boats the bounce well I have these animations by default that this is as 00:02:00
easy as coming to our classes and start using it let's go to the code and we see it is worth then 00:02:08
in the code look at this button that is the bat I have here that is 00:02:20
playing the pulse we are going to remove these for you to see how the pulse what it does is that it 00:02:26
illuminates, it illuminates and it gets a little more transparent and it goes 00:02:36
playing with that type of options with the jover I have put the animation in that this 00:02:46
now I tell you how it works well the case is that if instead of the pulse we put it for 00:02:52
example, animate the spin, okay, because what will be put is to turn around or there was another one that was the pin 00:03:00
is worth that you see that what it does is that good effect you can put different animations 00:03:11
to give a little more of a spark to your page, okay, well, if you look 00:03:17
we are going to go back to the web if you look here I have different tabs, okay, one is the 00:03:26
tailwind documentation, another is this one from eevee link that here we have different animations 00:03:37
that are not bad, they are very good, it is worth that web developers 00:03:48
usually use it a lot and this if you click on one you will have here the code that you would put the 00:03:54
time wind in ts ok well here what I have done is in the jihad I have put this from the ts 00:04:02
and I have copied the animation, I have copied all this and so I can take them, but we have to 00:04:16
take into account that in our configuration file of the tailwind config.js, it is worth then here 00:04:26
you have to make some changes that although it has all those animations because it is not more 00:04:32
work of a developer of dao of a web developer to us with knowing how to use 00:04:40
animations that the framework itself provides us that we are using because I think that 00:04:49
to get the idea and continue working in class it is worth it, then there is the tailwind css animate 00:04:55
ok there is this this this link and well we can use it as it is from the tailwind itself and it is also 00:05:05
quite comfortable ok how it is used if we come down here ok you see that you have the one that we install 00:05:23
the npm install minus delta and wind css animate ok I'm going to give the readme then here it is 00:05:33
telling you the steps it says first install the tailwind css animated then in config j s there is 00:05:41
street you have to put inside the plugin this plugin is worth and to use it it puts me here 00:05:50
different options that what it does, it puts an animation that is the one of jump, it puts a 00:05:58
300 law, well, we are going to do this, then stay with how to enter here I am going to the code 00:06:05
once in the code because we are going to do what we have said then I am going to remove this I am going to 00:06:14
remove it is also worth and in principle I do not have any animation in my button it is worth this I leave them 00:06:24
I am playing with the one of the bat this is worth then what is the first thing that 00:06:35
me ha dicho que haga instalar el npm y vale entonces control c vale aquí lo voy a parar 00:06:43
control vale aquí le pondríamos el control v s menos de mayúscula es para que nos haga la 00:06:58
dependency in the package.json file, then with the "-d", it will put that 00:07:08
dependency, I already have it installed, so it creates this dependency for me, 00:07:16
that it should be, yes, well, it creates those dependencies and there is no other type of dependencies 00:07:22
that are the development ones, it is worth that we are going to need them, well, at the end of those parameters 00:07:29
is for you to create a type of dependency at least of uppercase is for dependencies 00:07:37
of development ok then I launch the npm and tailwind css animate 00:07:42
let's see what 00:07:57
we launch the command, it has already been installed, perfect, this was just to show it, 00:07:59
okay, and then now, once we have it installed, we go to the time with fin j s and 00:08:11
we have to add this line within the plugin, okay, as it is telling us in the documentation, 00:08:19
Okay, and from here we could already use those animations that the 00:08:27
Tilewind CSS Animated is providing me, okay? So we are going to come to our code and we are going to start playing 00:08:35
with the same example that it puts here. We are going to make this a little bigger, so that we can see it well. 00:08:42
Okay, then it tells me, well, you have to put the class, the animate, okay? So I'm going to put here, for example, 00:08:49
ok and this is what it is going to do to us is that 00:08:59
it is not started, sorry, we are going to start this again, it is worth it, it is worth it and then look at 00:09:19
how it makes that movement so it is worth how it is balanced a little bit ok well then what else are we going 00:09:29
to put or see what he told us here in the help he says ok let's put the anime jam in 00:09:41
ok then we are going to put the anime jam in here 00:09:50
animate de ley de ley de 300 y que más me ha puesto el anime 00:09:57
200 anime 00:10:20
then we go to our page we see how good they do it to us, they admit a delay of this one, I will tell you 00:10:24
that delay that we have given that we have said of 300 is worth if this one also to see it better I 00:10:47
I'm going to put it with the hoover ok then when I give it 00:10:55
it starts to tremble and it's very ugly 00:11:06
1000 so it is better 00:11:15
when you overdo it, it does that, okay 00:11:23
and the 11 00:11:28
infinite durations 00:11:32
ok and so I remove the joder and that it does not go down ok then look at how now it does it to you all 00:11:39
the time ok well this video does not have much more history to use animations 00:11:50
I already tell you that the own animations or transitions if you want, it is not so bad 00:11:58
and you can do things here because the transition is worth it is that you try it is that it does not have 00:12:05
much more to give that type of base this because it makes this type of things good 00:12:15
property of transition this I am going to put it as you are living it if you want 00:12:29
The duration, the timing, the delay, what we have said about the delay, well, you have these options and also remember that Tailwind allows us to use the Tailwind CSS Animated 00:12:38
I think it's interesting, so with this we finish these videos with the Tailwind 00:13:01
you can configure it, you can complicate it, you can do things that are very cool 00:13:07
and from the next video we continue with the From 00:13:12
we are going to continue working with the From 00:13:20
and that's it, a greeting, see you later 00:13:25
Idioma/s:
es
Idioma/s subtítulos:
en
Autor/es:
Mario S.
Subido por:
Mario S.
Licencia:
Dominio público
Visualizaciones:
54
Fecha:
31 de julio de 2024 - 20:30
Visibilidad:
Público
Centro:
IES VILLABLANCA
Duración:
00′ 14″
Relación de aspecto:
1.78:1
Resolución:
1920x1080 píxeles
Tamaño:
46.70 MBytes

Del mismo autor…

Ver más del mismo autor

EducaMadrid, Plataforma Educativa de la Comunidad de Madrid

Plataforma Educativa EducaMadrid