How to create a modal with HTML, CSS & JS - Part 4: JavaScript continued
7 هزار بار بازدید -
7 سال پیش
-
With the modal working, we
With the modal working, we want to add a nice little fade in and fade out effect.
Because we can't transition the display property, instead we want to transition its opacity. To do this, I create a couple of very simple CSS animations, that we use inside of the JavaScript.
Also, to get things to work properly on fade out, I add in a new event listener - animationend - to only change the display property only once the modal has faded out. If not, it would display: none before the animation is done, defeating the purpose!
---
My Code Editor: VS Code - https://code.visualstudio.com/
How my browser refreshes when I save: How to automatically refresh your bro...
---
Support me on Patreon: Patreon: kevinpowell
I'm on some other places on the internet too!
If you'd like a behind the scenes and previews of what's coming up on my YouTube channel, make sure to follow me on Instagram and Twitter.
Instagram: Instagram: kevinpowell.co
Twitter: Twitter: KevinJPowell
Codepen: https://codepen.io/kevinpowell/
Github: https://github.com/kevin-powell
Because we can't transition the display property, instead we want to transition its opacity. To do this, I create a couple of very simple CSS animations, that we use inside of the JavaScript.
Also, to get things to work properly on fade out, I add in a new event listener - animationend - to only change the display property only once the modal has faded out. If not, it would display: none before the animation is done, defeating the purpose!
---
My Code Editor: VS Code - https://code.visualstudio.com/
How my browser refreshes when I save: How to automatically refresh your bro...
---
Support me on Patreon: Patreon: kevinpowell
I'm on some other places on the internet too!
If you'd like a behind the scenes and previews of what's coming up on my YouTube channel, make sure to follow me on Instagram and Twitter.
Instagram: Instagram: kevinpowell.co
Twitter: Twitter: KevinJPowell
Codepen: https://codepen.io/kevinpowell/
Github: https://github.com/kevin-powell
7 سال پیش
در تاریخ 1396/09/08 منتشر شده
است.
7,037
بـار بازدید شده