通过jQuery控制动画持续时间（由用户输入给出）

问题：没有直接的方法通过jQuery来控制CSS3关键帧动画的动画持续时间。通过jQuery控制动画持续时间（由用户输入给出）

似是而非/失败尝试：我已经试过类似$ CSS（ “动画时长 ”newimg），但是这不能工作（“ 母公司”）。。还有一种通过事件控制（即点击“完成”按钮）添加/减去具有动画持续时间属性的类的方法。

语境：在我的web应用程序，https://codepen.io/Refath/pen/yoZxMr，我有一个“速度”设置，可如果鼠标左侧边栏粘徘徊中找到。

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

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

的功能，当前的jQuery：

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

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

来源

2017-09-02 Rayman

让我看看我的理解。你有一个轮子慢慢地旋转，点击你想要3秒的快速旋转，对吧？ –

关闭;有一个文本字段，用户将输入一个数字_例如_3s。按下完成将触发一个事件，将旋转轮的动画持续时间更改为给定值（本例中为3秒）。 – Rayman

我会用使用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/

来源

2017-09-02 08:19:13 Lyimmi

我认为你可以更好地实现你想TweenMax由GSAP什么。

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

如果用户没有在输入字段上设置任何内容，它也有一个回退。

$(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>

来源

2017-09-02 07:44:50

通过jQuery控制动画持续时间（由用户输入给出）

回答

相关问题