#过渡与 Style 绑定

vicky.yu

一些过渡效果可以通过插值的方式来实现，例如在发生交互时将样式绑定到元素上。以这个例子为例：

<div id="demo">
  <div
    @mousemove="xCoordinate"
    :style="{ backgroundColor: `hsl(${x}, 80%, 50%)` }"
    class="movearea"
  >
    <h3>Move your mouse across the screen...</h3>
    <p>x: {{x}}</p>
  </div>
</div>
.movearea {
  transition: 0.2s background-color ease;
}
const Demo = {
  data() {
    return {
      x: 0
    }
  },
  methods: {
    xCoordinate(e) {
      this.x = e.clientX
    }
  }
}
Vue.createApp(Demo).mount('#demo')
点击此处实现

在这个例子中，我们是通过使用插值来创建动画，将触发条件添加到鼠标的移动过程上。同时将 CSS 过渡属性应用在元素上，让元素知道在更新时要使用什么过渡效果。

#性能
你可能注意到上面显示的动画使用了 transforms 之类的东西，并应用了诸如 perspective 之类的奇怪的 property——为什么它们是这样实现的，而不是仅仅使用 margin 和 top 等？

我们可以通过对性能的了解，在 web 上创建极其流畅的动画。我们希望尽可能对元素动画进行硬件加速，并使用不触发重绘的 property。我们来介绍一下如何实现这个目标。

#Transform 和 Opacity
我们可以通过工具，例如 CSS Triggers 来查看哪些属性会在动画时触发重绘。在工具中，查看 transform 的相关内容，你将看到：

非常好的是，更改 transform 不会触发任何几何形状变化或绘制。这意味着该操作可能是由合成器线程在 GPU 的帮助下执行。

opacity 属性的行为也类似。因此，他们是在 web 上做元素移动的理想选择。