简单的Javascript按钮单击动画(完成时带有回调)

问题描述 投票:0回答:1

我通常是JavaScript和动画的初学者。最近,我花了很多时间在互联网上寻找只是一个简单的基本单击按钮动画的时间,这样我正在使用的Phonegap应用看起来不会那么平坦,并且会对用户产生一点反应。对于像我这样的初学者,我还需要一些可读的东西,所以我会更好地理解这个想法。我终于想出了一些东西,以为我会分享。希望有人会对此有所帮助。参见下面的代码。

function animateButton(elem, callback) {
  var perc = 0; // Initially radial background is not visible
  var id = setInterval(function() {
    if (perc >= 100) {
      // Change "rgba(194, 194, 194, 1)" to whatever color you want the effect to be
      // Change "rgba(255, 255, 255, 1)" to whatever color the background is
      $(elem).css('background', 'radial-gradient(circle, rgba(194,194,194,1) 0%, rgba(255,255,255,1) 100%)');
      clearInterval(id);
      callback();
    } else {
      $(elem).css('background', 'radial-gradient(circle, rgba(194,194,194,1) 0%, rgba(255,255,255,1) ' + perc + '%)');
      perc = perc + 3;
    }

  }, 1)
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div onclick="animateButton(this, () => { alert('Callback')})">Button</div>
javascript html animation
1个回答
0
投票

我不会将javascript用于动画。它非常低效,有时看起来也有问题。尽管我没有为“ background”属性设置动画的解决方案,但我建议您看一下CSS中的关键帧。搜索动画时,这些应该是“转到”选项:https://www.w3schools.com/css/css3_animations.asp如果无法使用关键帧进行创建,请使用css中的“ transition”属性并使用javascript更改值。我尝试为您的示例执行此操作,但是过渡显然不支持渐变。我会检查一下:Use CSS3 transitions with gradient backgrounds


0
投票

我不会将javascript用于动画。它非常低效,有时看起来也有问题。尽管我没有为“ background”属性设置动画的解决方案,但我建议您看一下CSS中的关键帧。搜索动画时,这些应该是“转到”选项:https://www.w3schools.com/css/css3_animations.asp如果无法使用关键帧进行创建,请使用css中的“ transition”属性并使用javascript更改值。我尝试为您的示例执行此操作,但是过渡显然不支持渐变。我会检查一下:Use CSS3 transitions with gradient backgrounds

© www.soinside.com 2019 - 2024. All rights reserved.