时间戳

首页 > 解决方案 > 如何将 CSS 效果转换为 Javascript / jQuery

javascript - 如何将 CSS 效果转换为 Javascript / jQuery

问题描述

我想将CSS 效果转换为javascript代码。

我想在页面加载时自动离开一个部分。也就是说，一旦板子在一个 div 中加载了相同的效果。你可以去 Hover Me 看看 CSS 效果。

如果您不能使用该库，我想看看代码中发生了什么

我现在可以帮你添加我的 JavaScript / jQuery 代码吗？

谢谢

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>

标签： javascriptjquerycss

解决方案

这是一个解决方案，

1）改变你所有:hover的.hover

2）然后使用JavaScript添加这个类

document.addEventListener("DOMContentLoaded", function(event) { 
  document.querySelectorAll('.draw')[0].classList.add('hover');
});

找到了一个类似的答案How to execute CSS3 animation onLoad 而不是 hover？

推荐阅读