CSS 'Transformer: tourner' sur la page Charger avec Jquery/Javascript/CSS

Question

Simple div pour afficher un indicateur de vitesse;

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

En vol stationnaire, l'indicateur de vitesse s'anime très bien;

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

Je en ai besoin pour animer le chargement de la page, d'où j'ai essayé Changin le nom de classe de .outer:hover .needle à .animateNow et utilisé le jquery ci-dessous pour l'ajouter à .circle;

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

Cela n'a pas fonctionné, des idées?

CSS complet;

@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

noter d'abord que lorsque vous appelez addClass() dans jQuery vous devez omettre le sélecteur ., de sorte que votre code doit être:

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

Ensuite, pour faire le travail d'animation lorsque vous ajoutez la classe que vous avez juste besoin pour modifier le CSS pour travailler à la fois sur le vol stationnaire et lorsque l'élément .circle a cette classe.

Notez que vous devrez ajouter la classe soit sur window.load ou après un petit délai en utilisant setTimeout(), sinon elle sera immédiatement affichée dans sa position finale. Essayez ceci:

$(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>