添加或删除类时CSS不同的转换缓动

Question

在添加课程时是否可以轻松进行CSS转换，在删除课程时是否可以轻松实现？

＆＃13;

＆＃13;

$('button').on("click", function(){
  $('.box').toggleClass("alt")
})

＆＃13;

.box {
  width: 50px;
  height: 50px;
  background: red;
  transition: all 1500ms cubic-bezier(0.55, 0.055, 0.675, 0.19);

  /* easeOutCubic cubic-bezier(0.215, 0.61, 0.355, 1); */
  /* easeInCubic cubic-bezier(0.55, 0.055, 0.675, 0.19); */
}

.box.alt {
  transform: translate3d(600px, 0px, 0) scale(1.5);
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

将转换添加到alt类

.box.alt {
    transition: all 1500ms cubic-bezier(0.55, 0.055, 0.675, 0.19); // added ease in transition as mentioned by you in ques
    transform: translate3d(600px, 0px, 0) scale(1.5);
}