Question

问题：没有直接的方法可以通过jQuery控制CSS3关键帧动画的动画持续时间。

合理/失败的尝试：我尝试过像$（＆＃34; .parent＆＃34;）。css（＆＃34; animation-duration＆＃34;，newimg ），但这不起作用。还有一种添加/减去具有动画持续时间属性的类的方法，该类由事件控制（即，单击＆＃34;完成＆＃34;按钮）。

上下文：在我的网络应用https://codepen.io/Refath/pen/yoZxMr中，我有一个＆＃34; Speed＆＃34;设置，如果鼠标悬停在左侧粘边栏上，则可以找到该设置。

目标：用户应该能够在文本字段中插入值。单击完成后，将触发一个事件，将旋转轮的动画持续时间更改为该值，使其旋转更快/更慢。不幸的是，下面的方法是从父代添加和减去子类不适用于我的代码。

此外，由于下面显示的jQuery代码，控制台中没有错误，因此，它可能是格式化问题。任何帮助表示赞赏;谢谢。

当前jQuery的功能：

＆＃13;

$('.speedSave').click(function() {
    var el = $('.parent').addClass('custom');
    setTimeout(function() {
        el.removeClass('custom');
    }, 1000);
	var newimg = $(this).val();
           		        	$(".parent").css("animation-duration", newimg);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

＆＃13;

Answer 1

我认为您可以通过GSAP TweenMax更好地实现您想要的目标。

下面是一个工作示例（运行代码段）。

如果用户没有在输入字段上设置任何内容，它也会有后备。

$(document).ready(function(){
  TweenMax.to('#spinner', 10, { 
    rotation: 360,
    repeat: -1,
    ease: Linear.easeNone,
    });
});

$(document).on('click', '#button', function(){

  var duration = parseInt( $('#duration').val() );
  if ( isNaN( duration ) ) 
    { duration = 1 }

  TweenMax.to('#box', duration, { 
    rotation: '+=360',  
    ease: Power3.easeInOut });
})

#spinner {
  display: inline-block;
}
#box {
  width: 30px;
  height: 30px;
  background-color: royalblue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/TweenMax.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="spinner">
  <div id="box"></div>
</div>

Add  fast spin duration (seconds):
<input type="text" name="duration" id="duration">
<button id="button">Rotate</button>

Answer 2

我会使用GreenSock（TweenMax）。 https://greensock.com

我用gsap修改了你的例子，如果改变速度输入的秒数，它会改变转速。

以下是js：

var rotationSpeed = 3,
        TimeLine = new TimelineMax({repeat:-1});

$('.speedSave').click(function() {
    rotationSpeed = $(".speedtext").val();
    TimeLine.duration(rotationSpeed);
});

TimeLine.to(".rcc", rotationSpeed, {
    rotation:-360,
    transformOrigin:"center",
    ease: Power0.easeNone,
    force3D: true,
});

TimeLine.to(".parent", rotationSpeed, {
    rotation:360,
    transformOrigin:"center",
    ease: Power0.easeNone,
    force3D: true,
}, "-=" + rotationSpeed);

这是你修改过的例子： https://codepen.io/lyimmi/pen/brzQZY/

通过jQuery

2 个答案: