文章/答案/技术大牛

发布

社区首页 >问答首页 >CSS / jQuery更改旋转元素的动画持续时间

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

Stack Overflow用户

提问于 2020-08-20 13:16:25

回答 1查看 46关注 0票数 2

我需要改变旋转轮的动画持续时间。除了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>

jquery

css

回答 1

Stack Overflow用户

回答已采纳

发布于 2020-08-20 14:00:32

Safari有时是一个愚蠢的浏览器-你“需要”让它通过隐藏来重新呈现元素，然后再显示一次。

在safari中，下面的片段应该可以正常工作。

编辑。现在我说“需要”，但显然有一些解决办法，我不知道。

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>

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/63505956

复制

相似问题

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

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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