Last active
February 12, 2020 14:45
-
-
Save mrsize/022b97fbb2e2e94c7181c9f005d20d23 to your computer and use it in GitHub Desktop.
CSS Transition with Javascript (No jQuery)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>CSS Transition with Javascript (No jQuery)</title> | |
| <style type="text/css"> | |
| a{color: inherit;} | |
| /* Original state : */ | |
| .message | |
| { | |
| display: block; | |
| transform: translateY(10vh); | |
| opacity: 0; | |
| color:#000; | |
| } | |
| /* Final state : */ | |
| .message_animated | |
| { | |
| transform: translateY(0px); | |
| opacity: 1; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="site"> | |
| <div class="message" data-anim-start="3000" data-anim-duration="500"> | |
| <span>Bonjour, voici mon message <a href="#">Lire la suite</a></span> | |
| </div> | |
| </div> | |
| <script type="text/javascript"> | |
| // Targeted div : | |
| const the_div = document.querySelector(".message"); | |
| // Get Data Attributes : | |
| const start_time = the_div.getAttribute("data-anim-start"); | |
| const duration = the_div.getAttribute("data-anim-duration"); | |
| setTimeout(function(){ | |
| // Start the animation : | |
| the_div.classList.add('message_animated'); | |
| // Transition : | |
| const transition = "all " + duration + "ms ease-in-out"; | |
| // Apply transitions : | |
| the_div.style.webkitTransition = transition; | |
| the_div.style.MozTransition = transition; | |
| the_div.style.msTransition = transition; | |
| the_div.style.OTransition = transition; | |
| the_div.style.fransition = transition; | |
| }, start_time); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment