Question

我需要更改旋转轮的动画持续时间。在Safari和所有iOS浏览器上，我在台式机上尝试过的所有浏览器都可以使用此功能。

应用了这些类并从元素中移除了这些类，但是在调用第一个类之后，动画持续时间不会改变。任何见识将不胜感激。

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>

Answer 1

Safari有时是个白痴浏览器-您“需要”隐藏一秒钟，然后再次显示它，以使其重新呈现该元素。

下面的代码段在Safari中应该可以正常工作

EDIT 。现在我说“需要”，但是显然可能存在一些我不知道的解决方法。

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>

CSS / jQuery更改旋转元素的动画持续时间

1 个答案: