JQuery вращение вперед и назад анимация

Question

Я пытаюсь сделать плюс, чтобы пересечь кнопку переключения. Я уже создал трансформирующуюся прямую анимацию с переходом, но я не могу понять, как сделать небольшой переход назад. Заранее спасибо!

Вот мои фрагменты кода.

<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

Я добавил еще один класс, возвращаясь.

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

Answer 2

Я внес небольшое изменение в ваш код css и jquery. Поэтому я использовал hasClass для проверки состояния поворота без реального использования animaterotate для css напрямую.

НОВАЯ ВЕРСИЯ:

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>