CODEWITHSUNDEEP
javascriptcss
user12912544
user12912544

Reputation: 283

Transition doesnt work when animation property exists

I'm trying to make a clock, with ability to change timezones. But when I change the timezone (changing the rotate property), the transition property doesnt get triggered. it does, when i remove the animation property, but i need both. here is my code: 

@keyframes hours {
  to {
    transform: rotate(360deg);
  }
}
#watch .hours-hand {
  width: 0.8em;
  height: 7em;
  background: #232425;
  position: absolute;
  bottom: 50%;
  left: 50%;
  margin: 0 0 -0.8em -0.4em;
  box-shadow: #232425 0 0 2px;
  transform-origin: 0.4em 6.2em;
  transform: rotate(0deg);
  transition: all 1s;
}

var changeTime = (date) => {
  const hoursHand = document.querySelector(".hours-hand");
  const minutesHand = document.querySelector(".minutes-hand");

  const minutes = date.getMinutes();
  const hours = date.getHours();

  const newMinutes = (360 / 60) * minutes;
  const newHours = (360 / 12) * hours;

  hoursHand.style.transform = `rotate(${newHours}deg)`;
  minutesHand.style.transform = `rotate(${newMinutes}deg)`;
};

Upvotes: 2

Views: 31

Answers (1)

Danziger
Danziger

Reputation: 21161

You can just add a wrapper around the elements that already have an animation property and rotate that wrapper instead:

const watch = document.getElementById('watch');
const changeTimeButton = document.getElementById('changeTimeButton');

let shift = 0;

changeTimeButton.onclick = (date) => {
  shift = (shift + 360 / 12) % 360;
  
  watch.style.transform = `rotate(${ shift }deg)`;
};
@keyframes hours {
  to {
    transform: rotate(360deg);
  }
}

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  margin: 0;
}

#changeTimeButton {
  margin-top: 16px;
}

#watch {  
  position: relative;
  box-shadow: 0 0 32px 0 rgba(0, 0, 0, .125);
  border-radius: 100%;
  width: 50vh;
  height: 50vh;
}

.hours-hand {
  position: absolute;
  top: 8px;
  bottom: 50%;
  left: calc(50% - 2px);
  width: 4px;
  background: #232425;
  transform-origin: 50% 100%;
  animation-name: hours;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
<div id="watch">
  <div class="hours-hand"></div>
</div>

<button id="changeTimeButton">Change Time</button>

Upvotes: 1

Related Questions