如何在CSS過渡中停止轉換

Question

我已經設置了CSS過渡

 transition: all 2s 

然后，我應用CSS來更改轉換，例如：

 transform: rotate(20deg); 

過渡開始。

我想將其停在中間並留在那里，以便隨后可以在其上應用依賴於應用程序的其他JS ...暫停后的內容與要測試的問題無關 ，我使用：

 setTimeout(function() {
   ...
 }, 1000);

停止過渡的一種粗略方法是將CSS顯示設置為“無”。 將轉換設置為“無”或空字符串不起作用。 轉換將結束進行轉換。 將CSS重置為當前CSS的另一種技巧適用於其他屬性，但不適用於轉換。 將transition屬性設置為none或為空字符串也不會停止過渡的轉換。

當然一定有辦法。

有什么建議嗎？ 最好在JQuery中， 我不想使用動畫。

Answer 1

為什么不使用可以輕松管理狀態的動畫：

 $('button').eq(0).click(function() { $('.box').css('animation-play-state', 'paused'); }); $('button').eq(1).click(function() { $('.box').css('animation', 'none'); }); 

 .box { margin: 50px; width: 100px; height: 100px; background: red; display:inline-block; vertical-align:top; animation: anime 10s forwards; } @keyframes anime { to { transform: rotate(180deg); } } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="box"> </div> <button>Stop</button> <button>Reset</button> 

UPDATE

您可以嘗試以下方式進行過渡：

 $('button').eq(0).click(function() { $('.box').addClass('rotate'); }); $('button').eq(1).click(function() { var e = $('.box').css('transform'); // get the current state $('.box').css('transform', e); //apply inline style to override the one defined in the class }); 

 .box { margin: 50px; width: 100px; height: 100px; background: red; display:inline-block; vertical-align:top; transition: all 10s; } .rotate { transform: rotate(180deg); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="box"> </div> <button>start</button> <button>stop</button>