JQuery 前后旋转 animation

Question

I am trying to make plus to cross toggle button. Ive already created a transforming forward animation with transition but i cant figure out how to make slight transition to backwards. Thanks in advance!

Here is my code snippets.

<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();
            });

        });

A snippit to work with:

 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

I made a small change on your css and jquery code. Therefore, I used "hasClass" to check the state of the rotation without really using the 'animaterotate' for css directly.

NEW VERSION:

 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>

OLD VERSION:

 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

I added another class while going back.

        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;
   }