触效分离的原则是指 “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>
用父元素作为触发器，子元素来做响应动画，这样就避免了“自激振荡”。
网友评论