使用jquery/Javascript/CSS在页面加载CSS'转换：旋转'

Question

简单的div来显示速度计;

<div class="outer"> 
    <div class="needle" ></div> 
</div> 

在悬停时，速度计动画好;

.outer:hover .needle { 
    transform: rotate(313deg); 
    transform-origin: center center; 
} 

我需要这个动画在页面加载，所以我尝试了变化类名从.outer:hover .needle到.animateNow和使用以下jQuery来此添加到.circle;

$(document).ready(function() { 
    $('.outer').addClass('animateNow'); 
}); 

这没有奏效，有什么想法？

Full CSS;

@charset "utf-8"; 
/* CSS Document */ 

body { 
    background-color: black; 
} 

.outer { 
    position: relative; 
    /*display: inline-block;*/ 
    height:100vw; 
    width: 100%; 
    background-image: url(../CentreDial3.png); 
    background-size: cover; 
    border-radius: 50%; 
} 
.needle { 
    height: 100%; 
    width: 100%; 
    position: absolute; 
    top: 0; 
    left: 0; 
    border-radius: 50%; 
    transition: all 3s ease-in; 

} 
.needle:before { 

    left: calc(50% - 2.5px); 
    content:""; 
    position: absolute; 
    top: 50%; 
    left: calc(50% - 2.5px); 
    height: 45%; 
    width: 5px; 
background: #b30000; 
    border-radius: 40%; 

} 
.needle:after { 
    content: ""; 
    position: absolute; 
    top: calc(100% + 5px); 
    left: 50%; 
    height: 10px; 
    width: 10px; 
    transform: rotate(-135deg); 
    transform-origin: top left; 
    border-top: 0px solid white; 
    border-left: 0px solid black; 


} 


.outer:hover .needle, 
.outer.animateNow .needle{ 
    transform: rotate(313deg); 
    transform-origin: center center; 
} 

Answer 1

首先指出，在jQuery的调用addClass()当你需要省略.选择，让你的代码应该是：

$('.circle').addClass('animateNow'); 

然后使动画作品，当你添加你需要的只是类修改CSS以同时处理悬停和当.circle元素具有该类时。

请注意，您将需要添加或者在window.load或使用setTimeout()短暂的延迟后级，否则将在其最终位置立即显示出来。试试这个：

$(window).load(function() { 
 
    $('.outer').addClass('animateNow'); 
 
});

@charset "utf-8"; 
 

 
/* CSS Document */ 
 

 
body { 
 
    background-color: black; 
 
} 
 

 
.outer { 
 
    position: relative; 
 
    /*display: inline-block;*/ 
 
    height: 100vw; 
 
    width: 100%; 
 
    background-image: url(../CentreDial3.png); 
 
    background-size: cover; 
 
    border-radius: 50%; 
 
} 
 

 
.needle { 
 
    height: 100%; 
 
    width: 100%; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    border-radius: 50%; 
 
    transition: all 3s ease-in; 
 
} 
 

 
.needle:before { 
 
    left: calc(50% - 2.5px); 
 
    content: ""; 
 
    position: absolute; 
 
    top: 50%; 
 
    left: calc(50% - 2.5px); 
 
    height: 45%; 
 
    width: 5px; 
 
    background: #b30000; 
 
    border-radius: 40%; 
 
} 
 

 
.needle:after { 
 
    content: ""; 
 
    position: absolute; 
 
    top: calc(100% + 5px); 
 
    left: 50%; 
 
    height: 10px; 
 
    width: 10px; 
 
    transform: rotate(-135deg); 
 
    transform-origin: top left; 
 
    border-top: 0px solid white; 
 
    border-left: 0px solid black; 
 
} 
 

 
.outer:hover .needle, 
 
.outer.animateNow .needle { 
 
    transform: rotate(313deg); 
 
    transform-origin: center center; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="outer"> 
 
    <div class="needle"></div> 
 
</div>