使用Jquery/Javascript/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');
});

那没用,有什么想法吗？

完整的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

首先请注意,在调用addClass()jQuery 时,您需要省略.选择器,因此您的代码应该是:

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

然后在添加类时使动画工作,您只需要修改CSS以在hover和.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>