如何将动画类添加到div
如何将动画类添加到div
提问于 2017-10-04 04:01:21
悬停在红色框上是添加一个sweep to top蓝色动画到该框，但我想添加此功能的设置超时功能，没有悬停。为什么这不管用？
setTimeout(function() {
$('.hvr-sweep-to-top').addClass('add');
}, 8000);.hvr-sweep-to-top {
height: 150px;
width: 150px;
background: red;
display: inline-block;
vertical-align: middle;
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px transparent;
position: relative;
-webkit-transition-property: color;
transition-property: color;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
}
.hvr-sweep-to-top:before {
content: "";
position: absolute;
z-index: -1;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #2098D1;
-webkit-transform: scaleY(0);
transform: scaleY(0);
-webkit-transform-origin: 50% 100%;
transform-origin: 50% 100%;
-webkit-transition-property: transform;
transition-property: transform;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.hvr-sweep-to-top:hover:before,
.hvr-sweep-to-top:focus:before,
.hvr-sweep-to-top:active:before {
-webkit-transform: scaleY(1);
transform: scaleY(1);
}
.add {
-webkit-transform: scaleY(1);
transform: scaleY(1);
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="hvr-sweep-to-top">
</div>
回答 2
Stack Overflow用户
回答已采纳
发布于 2017-10-04 04:08:25
您要添加的类只是一个悬停类。您必须在页面底部添加脚本，并在document.ready函数下添加脚本。在这里，两秒钟后颜色将变为蓝色：
$( document ).ready(function() {
setTimeout(function() {
$('.hvr-sweep-to-top').addClass('new');
}, 2000);
}); .hvr-sweep-to-top {
height: 150px;
width: 150px;
background: red;
display: inline-block;
vertical-align: middle;
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px transparent;
position: relative;
-webkit-transition-property: color;
transition-property: color;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
}
.new:before {
content: "";
position: absolute;
z-index: -1;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #2098D1;
-webkit-transform: scaleY(0);
transform: scaleY(1);
-webkit-transform-origin: 50% 100%;
transform-origin: 50% 100%;
-webkit-transition-property: transform;
transition-property: transform;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.add {
-webkit-transform: scaleY(1);
transform: scaleY(1);
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<div class="hvr-sweep-to-top">
</body>
</html>
Stack Overflow用户
发布于 2017-10-04 04:06:46
试着添加
var someTxt = setTimeout(function() {
$('.hvr-sweep-to-top').addClass('add');
}, 8000);我没有把握!
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/46556805
复制相关文章
相似问题
腾讯云开发者
