Vue提供了一些抽象概念,可以帮助处理过渡和动画,特别是在响应某些变化时。这些抽象的概念包括:
除了提供有用的API之外,值得一提的是,前面的class和style声明也可以应用于动画和过渡,用于更简单的用例。我们将回顾一些web动画和过渡的基础知识。
尽管transition元素组件对于组件的进入和离开非常有用,但也可以通过添加一个条件class来激活动画,而无需挂载组件。
<div :class="{ shake: noActivated }"></div>
<button @click="noActivated = true"></button>
data() { return { noActivated: false } }
一些过渡效果可以通过插值的方式来实现,例如在发生交互时将样式绑定到元素上。
<div @mousemove="xCoordinate" :style="{ backgroundColor: 'hsl(${x}, 80%, 50%)'}" class="movearea"></div>
methods: { xCoordinate(e) {this.x = e.clientX} }
通过使用插值来创建动画,将触发条件添加到鼠标的移动过程上,同时将CSS过渡属性应用在元素上,让元素知道在更新时要使用什么过渡效果。
上面示例中显示的动画使用了transforms之类的东西,并应用了诸如perspective之类的奇怪的property——为什么它们是这样实现的,而不是仅仅使用margin和top等? 我们可以通过对性能的了解,在web上创建极其流畅的动画。我们希望尽可能对元素动画进行硬件加速,并使用不触发重绘的property。下面介绍如何实现这个目标。
我们可以通过工具,例如csstriggers.com/ 来查看哪些属性会在动画时触发重绘,在工具中,查看transform的相关内容,可以看到:非常好的是,更改transform不会触发任何几何形状变化或绘制,这意味着该操作可能是由合成器线程在GPU的帮助下执行的。
Opacity属性的行为也类似,因此他们是在web上做元素移动的理想选择。
诸如perspective、backface-visibility和transform:translateZ(x)等property将让浏览器知道你需要硬件加速。如果要对一个元素进行硬件加速,可以应用以下任何一个property(并不是需要全部,任意一个就可以):
perspective: 1000px;
backface-visibility: hidden;
transform: translateZ(0);
复制代码
许多像GreenSock这样的JS库都会默认你需要硬件加速,并在默认情况下应用,所以不需要手动设置它们。
对于简单UI过渡,即从一个状态到另一个没有中间状态的状态,通常使用0.1s到0.4s之间的计时,大多数人发现0.25s是一个最佳选择。能用这个定时做任何事情吗?并不是。如果有一些元素需要移动更大的距离,或者有更多的步骤或状态变化,0.25s并不会有很好的效果,你将不得不有更多的目的性,而且定时也需要更加独特。但这并不意味着不能在应用中重复使用效果好的默认值。 你可能发现,起始动画比结束动画的时间稍长一些,看起来会更好一些。用户通常是在动画开始时被引导的,而在动画结束时没有那么多耐心,因为他们想继续他们的动作。
Easing是在动画中表达深度的一个重要方式。动画新手最常犯的一个错误是在起始动画节点使用ease-in,在结束动画节点使用ease-out。实际上需要的是反过来的。如果我们将这些状态应用于过渡,它应该像这样:
.button {
background: #1b8f5a;
/* 应用于初始状态,因此此转换将应用于返回状态 */
transition: background 0.25s ease-in;
}
.button:hover {
background: #3eaf7c;
/* 应用于悬停状态,因此在触发悬停时将应用此过渡 */
transition: background 0.35s ease-out;
}
复制代码
gsap.from(element, { duration: 1, ease: 'bounce.out', y: -500 })
本文系转载,前往查看
如有侵权,请联系 cloudcommunity@tencent.com 删除。
本文系转载,前往查看
如有侵权,请联系 cloudcommunity@tencent.com 删除。