css动画原则 —— 触效分离

触效分离的原则是指 “separate the trigger from the effect”，也就是说动画效果与动画触发器要分开。举个常见的例子，如下图所示，设计了一个hover的动画，但鼠标放在特定位置时，这个动画会产生抖动。

原因很简单，因为动画的触发与效果都集中在了一个元素，当触发动画后，动画效果又反过来再次触发反向动画，形成了“自激振荡”。

触效分离就是解决这个问题的常用原则。还是上面那个例子，按照触效分离的原则，代码如下：

<button class="btn">
  <span class="background">
    Hello World
  </span>
</button>

<style>
  .background {
    will-change: transform;
    transition: transform 450ms;
  }
  
  .btn:hover .background {
    transition: transform 150ms;
    transform: translateY(-10px);
  }
</style>

用父元素作为触发器，子元素来做响应动画，这样就避免了“自激振荡”。