使用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>