javascript - 使用 Jquery/Javascript/CSS 进行页面加载时出现 CSS 'Transform: rotate'

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

首先注意，在 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>