时间戳

首页 > 解决方案 > 向旋转元素添加了过渡属性，但它以 0 度向后移动？

javascript - 向旋转元素添加了过渡属性，但它以 0 度向后移动？

问题描述

我正在构建一个 css3 时钟并将过渡应用到它的秒针，但它会在 0 度处转回？我尝试添加一个一次性事件侦听器以在它达到 360 度时删除过渡，以便秒针立即从 360 度跳到起点，但它不起作用。有没有办法纠正这个，除了无限增加度数。 

var secHand = document.querySelector('div div:first-child');
var minHand = document.querySelector('div:nth-child(2)');
var hourHand = document.querySelector('div:nth-child(3)');
var myVar = setInterval(myTimer, 1000);

function myTimer() {
  var d = new Date();
  function updateHands() {
    secHand.style.transform = `rotate(${d.getSeconds()*6}deg)`;
    minHand.style.transform = `rotate(${d.getMinutes()*6}deg)`;
    hourHand.style.transform = `rotate(${d.getHours()*(360/12) + d.getMinutes()*6*6/360}deg)`;
  }
  // I tried this but I don't know how to make it work properly.
  if (d.getSeconds() == 0) {
    secHand.style.transform = 'rotate(360deg)';
    secHand.addEventListener('transitionend', function(e){
      e.target.removeEventListener(e.type, arguments.callee);
      this.style.transition = 'transform 0s';
      updateHands();
      this.style.transition = 'transform 0.5s';
    })
  }
  else updateHands();
}
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: url('https://stmed.net/sites/default/files/sky-wallpapers-28043-2711012.jpg'), linear-gradient(to bottom, #1e528e 0%, #265889 50%, #9da671 100%);
  background-repeat: no-repeat;
  background-attachment: fixed;

}
div {
  border-radius: 50%;
}
body > div {
  border: 20px solid white;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  margin: auto;
}
div div:first-child {
  margin: auto;
  width: 3px;
  background-color: black;
  height: 49%;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 50%;
  transform: rotate(180deg);
  transform-origin: 50% 100%;
  transition: transform 0.5s;
  transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1) !important;
}
div:nth-child(2) {
  width: 5px;
  background-color: black;
  height: 46%;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 50%;
  margin: auto;
  transform: rotate(360deg);
  transform-origin: 50% 100%;
  transition: transform 2s;
  
}
div:nth-child(3) {
  width: 5px;
  background-color: black;
  height: 43%;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 50%;
  margin: auto;
  transform: rotate(360deg);
  transform-origin: 50% 100%;
  transition: transform 3s;
  
}
<div>
  <div></div>
  <div></div>
  <div></div>
</div>
观看片段，当秒针达到 60 秒时，它会返回。

标签： javascript

解决方案

我会做一个回调，例如类似的东西

var secHand = document.querySelector('div div:first-child');
var minHand = document.querySelector('div:nth-child(2)');
var hourHand = document.querySelector('div:nth-child(3)');
var myVar = setInterval(myTimer, 1000);

function myTimer() {
  var d = new Date();
  function updateHands() {
    secHand.style.transform = `rotate(${d.getSeconds()*6}deg)`;
    minHand.style.transform = `rotate(${d.getMinutes()*6}deg)`;
    hourHand.style.transform = `rotate(${d.getHours()*(360/12) + d.getMinutes()*6*6/360}deg)`;
  }
  // I tried this but I don't know how to make it work properly.
  if (d.getSeconds() == 0) {
    secHand.style.transform = 'rotate(360deg)';
    secHand.addEventListener('transitionend', function(e){
      e.target.removeEventListener(e.type, arguments.callee);
      this.style.transition = 'transform 0s';
      var localyRechunk = function(callBack) {
        updateHands();
        callBack();
      };

      localyRechunk(function() {
          console.log('give back the transition');
      });

    })
  }
  else updateHands();
}

也做了一个小提琴：https : //jsfiddle.net/3qvyxmdu/ 我只是没有完成它，所以它会回馈过渡效果。但简单的回调。您可以在 hare中阅读有关它的信息。

推荐阅读