通過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控制動畫持續時間（由用戶輸入給出）

回答

相關問題