ArraysRus ArraysRus - 2 years ago 52
CSS Question

CSS 'Transform: rotate' on Page Load using Jquery/Javascript/CSS

Simple div to display a speedometer;

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


On hover the speedometer animates fine;

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


I need this to animate on page load, hence I tried changin the class name from
.outer:hover .needle
to
.animateNow
and used the following jquery to add this to
.circle
;

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


That didn't work, any ideas?

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 Source

Firstly note that when calling addClass() in jQuery you need to omit the . selector, so your code should be:

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

Then to make the animation work when you add the class you just need to amend the CSS to work on both hover and when the .circle element has that class.

Note that you will need to add the class either on window.load or after a small delay using setTimeout(), otherwise it will be immediately shown in its final position. Try this:

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

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download