CSS过渡能否在添加类时用ease-in、移除类时用ease-out？

当然可以实现！核心思路是利用CSS选择器的优先级，给添加类和移除类这两种状态分别指定不同的过渡缓动函数：在基础样式里定义移除类时的ease-out（或对应贝塞尔曲线），在添加的目标类里覆盖过渡属性，指定添加类时的ease-in。

具体逻辑：

• 元素处于初始状态（无.alt类）时，过渡规则使用easeOutCubic，对应移除类时的动画
• 元素添加.alt类后，过渡规则被覆盖为easeInCubic，对应添加类时的动画

下面是调整后的完整代码示例：

HTML #

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

CSS #

.box {
  width: 50px;
  height: 50px;
  background: red;
  /* 移除.alt类时使用easeOutCubic缓动 */
  transition: all 1500ms cubic-bezier(0.215, 0.61, 0.355, 1);
}

.box.alt {
  transform: translate3d(600px, 0px, 0) scale(1.5);
  /* 添加.alt类时使用easeInCubic缓动，覆盖基础过渡规则 */
  transition: all 1500ms cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

JavaScript #

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

点击按钮测试就能看到：添加.alt类时，元素会以ease-in的节奏移动放大；移除类时，则以ease-out的节奏回归原位。需要注意的是，过渡的属性（这里是all）和时长要保持一致，这样动画切换才会流畅无断层。

内容的提问来源于stack exchange，提问作者YarGnawh