CODEWITHSUNDEEP
jquerycss
Mario
Mario

Reputation: 33

CSS / jQuery change animation duration of a rotating element

I need to change the animation duration of a rotating wheel. This is working in every browser I have tried it on desktop, except Safari and all iOS browsers.

The classes are applied and removed from the element but the animation duration doesn't change after the first one is called. Any insight will be greatly appreciated.

let speed = 0;
$('.spinner').addClass(`rotate-${speed}`);

$('.speedUp').on('click', function() {
  if (speed <= 2) {
    $('.spinner').removeClass(`rotate-${speed}`);
    speed += 1;
    $('.spinner').addClass(`rotate-${speed}`);
  }
})

$('.speedDown').on('click', function() {
  if (speed >= 1) {
    $('.spinner').removeClass(`rotate-${speed}`);
    speed -= 1;
    $('.spinner').addClass(`rotate-${speed}`);
  }
})
body {
  text-align: center;
}

h2 {
  cursor: pointer;
  font-size: 36px;
}

div.spinner {
  width: 200px;
  height: 200px;
  border: 3px dashed;
  border-radius: 50%;
  margin: auto;
}

@keyframes rotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.rotate-0 { animation: rotate 0s linear infinite; }
.rotate-1 { animation: rotate 4s linear infinite; }  
.rotate-2 { animation: rotate 3s linear infinite; }
.rotate-3 { animation: rotate 2s linear infinite; }
<h2 class="speedUp">+</h2>
<h2 class="speedDown">-</h2>
<div class="spinner"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Upvotes: 2

Views: 61

Answers (1)

Stender
Stender

Reputation: 2492

Safari is an idiot browser sometimes - You "need" to make it re-render the element by hiding is for a split second, and showing it again.

The below snippet should work fine in safari

EDIT. Now I say "Need", but there obviously might be workarounds, that I am not aware of..

let speed = 0;
$('.spinner').addClass(`rotate-${speed}`);

$('.speedUp').on('click', function() {
  $('.spinner').hide();
  if (speed <= 2) {
    $('.spinner').removeClass(`rotate-${speed}`);
    speed += 1;
    $('.spinner').addClass(`rotate-${speed}`);
  }
  setTimeout(function() { 
        $('.spinner').show();
    }, 50);
})

$('.speedDown').on('click', function() {
  $('.spinner').hide();
  if (speed >= 1) {
    $('.spinner').removeClass(`rotate-${speed}`);
    speed -= 1;
    $('.spinner').addClass(`rotate-${speed}`);
  }
  setTimeout(function() { 
        $('.spinner').show();
    }, 50);
})
body {
  text-align: center;
}

h2 {
  cursor: pointer;
  font-size: 36px;
}

div.spinner {
  width: 200px;
  height: 200px;
  border: 3px dashed;
  border-radius: 50%;
  margin: auto;
}

@keyframes rotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@-webkit-keyframes rotate {
    0%          { -webkit-transform:rotate(0deg); }
    100%        { -webkit-transform:rotate(360deg); }
}

@-moz-keyframes rotate {
    0%          { -moz-transform:rotate(0deg); }
    100%        { -moz-transform:rotate(360deg); }
}

.rotate-0 { 
    -webkit-animation:rotate 0s infinite linear;
    -moz-animation:rotate 0s infinite linear;
    animation: rotate 0s linear infinite; 
}
.rotate-1 { 
    -webkit-animation:rotate 4s infinite linear;
    -moz-animation:rotate 4s infinite linear;
    animation: rotate 4s linear infinite; 
}
.rotate-2 { 
    -webkit-animation:rotate 3s infinite linear;
    -moz-animation:rotate 3s infinite linear;
    animation: rotate 3s linear infinite; 
}
.rotate-3 { 
    -webkit-animation:rotate 2s infinite linear;
    -moz-animation:rotate 2s infinite linear;
    animation: rotate 2s linear infinite; 
}
<h2 class="speedUp">+</h2>
<h2 class="speedDown">-</h2>
<div class="spinner"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Upvotes: 1

Related Questions