為什么動畫結束后元素的寬度會發生變化？

Question

我正在學習 jQuery，測試其功能，並且對我制作的示例有一些問題。

https://codepen.io/MaxVelichkin/pen/pBJeZy

 /*remove animate2 class and assign animate1 class to target*/ $(function() { $('#trigger').on('click', function() { $('#target').removeClass('animate2'); $('#target').addClass('animate1'); }); }); /*remove animate1 class and assign animate2 class to target*/ $(function() { $('#trigger2').on('click', function() { $('#target').removeClass('animate1'); $('#target').addClass('animate2'); }); });

 /*just a container around*/ #container { margin: 10px; width: 350px; height: 350px; border: solid green 1px; } /*green button*/ #trigger { width: 50px; height: 50px; border-radius: 100%; background-color: green; margin: 20px auto; } /*red button*/ #trigger2 { width: 50px; height: 50px; border-radius: 100%; background-color: red; margin: 20px auto; } /*Target div which will be changing*/ #target { width: 100px; height: 100px; border: solid blue 1px; margin: 10px auto; } /*Keyframes for green button*/ @keyframes myfirst { 0% { background: white; width: 100px; height: 100px; border-radius: 0%; } 100% { background: blue; width: 150px; border-radius: 100%; } } /*Keyframes for red button*/ @keyframes mysecond { 0% { background: blue; width: 150px; border-radius: 100%; } 100% { background: white; width: 100px; height: 100px; border-radius: 0%; } } /*cusstom class to be assigned by green button*/ .animate1 { -webkit-animation: myfirst 3s; animation: myfirst 3s; height: 100px; background: blue; width: 150px; border-radius: 100%; margin: 10px auto; } /*cusstom class to be assigned by red button*/ .animate2 { -webkit-animation: mysecond 3s; animation: mysecond 3s; height: 100px; width: 150px; border: solid red 1px; border-radius: 0%; margin: 10px auto; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="container"> <div id="trigger"></div> <div id="trigger2"></div> <div id="target"></div> </div>

有：

• 2 個按鈕，綠色和紅色。
• 2組關鍵幀。
• 2 個自定義類，它們啟動相應關鍵幀的動畫並應用最后一個關鍵幀的樣式。
• 目標 div，我想在單擊按鈕時更改哪種樣式。

當我單擊按鈕時，它會為目標 div 分配一個類並刪除由另一個按鈕分配的類。

問題1：為什么綠色按鈕動畫結束后目標div的寬度變回100px（為什么沒有保持150px）？

問題 2：我做的一切都正確還是有更好的 jQuery 方法？

Answer 1

您的#target優先，因為它是一個 id 選擇器。 它的寬度為100px 。 你的類animate1被覆蓋了，所以這就是為什么你沒有看到150px 。

Answer 2

你可以像這樣的動畫編碼：myfirst 3s forwords;