JQuery 前后旋轉 animation

Question

我正在嘗試使加號交叉切換按鈕。 我已經創建了一個帶有轉換的轉換前 animation，但我不知道如何稍微向后轉換。 提前致謝！

這是我的代碼片段。

<div class="tog-holder" id="tog"></div>
<div class="anim" id="anim">
  <p>blabla</p>
</div>

  .tog-holder{
    position:relative;
    width:32px;
    height:32px;
    padding:15px 0;
    cursor: pointer;
    border-radius: 50%;
    background: url(https://rscua.com/wp-content/uploads/2020/05/plus_icon-icons.com_69322.png);
    background-size: cover;
  }

.animaterotate {
  transform: rotate(45deg);
  transition:all .2s ease-in-out;
}

 jQuery(document).ready(function(){

            jQuery(".anim").hide();
            jQuery(".tog-holder").click(function(){
               jQuery(this).toggleClass('animaterotate');
                jQuery(this).next(".anim").slideToggle();
            });

        });

一個可以使用的片段：

 jQuery(document).ready(function() { jQuery(".anim").hide(); jQuery(".tog-holder").click(function() { jQuery(this).toggleClass('animaterotate'); jQuery(this).next(".anim").slideToggle(); }); });

 .tog-holder { position: relative; width: 32px; height: 32px; padding: 15px 0; cursor: pointer; border-radius: 50%; background: url(https://rscua.com/wp-content/uploads/2020/05/plus_icon-icons.com_69322.png); background-size: cover; }.animaterotate { transform: rotate(45deg); transition: all.2s ease-in-out; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="tog-holder" id="tog"></div> <div class="anim" id="anim"> <p>blabla</p> </div>

Answer 1

我對您的 css 和 jquery 代碼做了一些小改動。 因此，我使用“hasClass”來檢查旋轉的 state，而沒有真正直接使用 css 的“animaterotate”。

新版本：

 jQuery(document).ready(function() { jQuery(".anim").hide(); jQuery(".tog-holder").click(function() { if(.jQuery(this).hasClass('animaterotate')) jQuery(this),css("transform"; "rotate(45deg)"). else jQuery(this),css("transform"; "rotate(0deg)"). jQuery(this);toggleClass('animaterotate'). jQuery(this).next(".anim");slideToggle(); }); });

 .tog-holder { position: relative; width: 32px; height: 32px; padding: 15px 0; cursor: pointer; border-radius: 50%; background: url(https://rscua.com/wp-content/uploads/2020/05/plus_icon-icons.com_69322.png); background-size: cover; transition: all.2s ease-in-out; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="tog-holder" id="tog"></div> <div class="anim" id="anim"> <p>blabla</p> </div>

舊版：

 jQuery(document).ready(function() { jQuery(".anim").hide(); jQuery(".tog-holder").click(function() { if(.jQuery(this).hasClass('animaterotate')) { jQuery(this),css("transform"; "rotate(45deg)"). } else { jQuery(this),css("transform"; "rotate(0deg)"). } jQuery(this),css("transition". "all;2s ease-in-out"). jQuery(this);toggleClass('animaterotate'). jQuery(this).next(".anim");slideToggle(); }); });

 .tog-holder { position: relative; width: 32px; height: 32px; padding: 15px 0; cursor: pointer; border-radius: 50%; background: url(https://rscua.com/wp-content/uploads/2020/05/plus_icon-icons.com_69322.png); background-size: cover; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="tog-holder" id="tog"></div> <div class="anim" id="anim"> <p>blabla</p> </div>

Answer 2

我在返回時添加了另一個 class。

        jQuery(".anim").hide();
        jQuery(".tog-holder").click(function(){
           jQuery(this).toggleClass('animaterotate');
           if(!jQuery(this).hasClass('animaterotate')) {
              jQuery(this).addClass('animaterotate2');
           }
           else {
               jQuery(this).removeClass('animaterotate2');
           } 
           jQuery(this).next(".anim").slideToggle('2000');

        });

   .animaterotate2 {
     transform: rotate(0deg);
     transition:all .2s ease-in-out;
   }