How to convert CSS effect to Javascript / jQuery
Question
I want to convert a CSS effect to a javascript code.
I want to automatically leave a section when the page is loaded. That is, once the board is loaded with the same effect round one div. You can go to Hover Me to see the CSS effect.
If you can not use the library, I want to see what happens in the code
Can I help you add my JavaScript / jQuery code now?
Thanks
html{ background: #080808; } div { background: none; border: 0; box-sizing: border-box; margin: 1em; padding: 1em 2em; color: #fff; font-size: inherit; font-weight: 700; position: relative; vertical-align: middle; } div::before, div::after { box-sizing: inherit; content: ''; position: absolute; width: 100%; height: 100%; } .draw { transition: color 0.25s; } .draw::before, .draw::after { border: 2px solid transparent; width: 0; height: 0; } .draw::before { top: 0; left: 0; } .draw::after { bottom: 0; right: 0; } .draw:hover { color: #60daaa; } .draw:hover::before, .draw:hover::after { width: 100%; height: 100%; } .draw:hover::before { border-top-color: #60daaa; border-right-color: #60daaa; transition: width 0.25s ease-out, height 0.25s ease-out 0.25s; } .draw:hover::after { border-bottom-color: #60daaa; border-left-color: #60daaa; } .meet:hover { color: #fbca67; } .meet::after { top: 0; left: 0; } .meet:hover::before { border-top-color: #fbca67; border-right-color: #fbca67; } .meet:hover::after { border-bottom-color: #fbca67; border-left-color: #fbca67; transition: height 0.25s ease-out, width 0.25s ease-out 0.25s; }
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="css/uikit-rtl.min.css"> <link rel="stylesheet" href="style.css"> <title>Document</title> <script src="js/jquery.js"></script> </head> <body id="top"> <div onload="loading()" id="iki" class="draw meet">Hover Me</div> <script src="js/uikit.min.js"></script> <script src="js/uikit-icons.min.js"></script> </body> </html>
1 answers
solution1
0 2018-07-24 06:42:12
Here is one solution for this,
1) Change all your :hover to .hover
2) Then add this class using JavaScript
document.addEventListener("DOMContentLoaded", function(event) {
document.querySelectorAll('.draw')[0].classList.add('hover');
});
Found a similar answer How to execute CSS3 animation onLoad instead of hover?
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.