JavaScript是如何工作的: CSS 和 JS 动画底层原理及如何优化它们的性能

最新推荐文章于 2023-05-23 00:01:12 发布

Fundebug

最新推荐文章于 2023-05-23 00:01:12 发布

阅读量2.9k

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript

本文链接：https://blog.youkuaiyun.com/Fundebug/article/details/86539108

摘要： 理解浏览器渲染。

原文：JavaScript是如何工作的: CSS 和 JS 动画底层原理及如何优化它们的性能
作者：前端小智

Fundebug经授权转载，版权归原作者所有。

这是专门探索 JavaScript 及其所构建的组件的系列文章的第 13 篇。

如果你错过了前面的章节，可以在这里找到它们：

概述

你肯定知道，动画在创建引人注目的 Web 应用程序中扮演着重要的角色。随着用户越来越多地将注意力转移到用户体验上，商户开始意识到完美、愉快的用户体验的重要性，结果 Web 应用程序变得越来越重，并具有更动态交互的 UI。这一切都需要更复杂的动画，以便用户在整个过程中更平稳地进行状态转换。今天，这甚至不被认为是什么特别的事情。用户正变得越来越挑剔，默认情况下，他们期望的是具有高响应性和交互性的用户界面。

然而，界面的动画化并不一定是简单的。什么是动画，什么时候该用动画，动画应该有什么样的视频效果，这些都是棘手的问题。

JavaScript 和 CSS 动画比较

创建 Web 动画的两种主要方法是使用JavaScript和 CSS。选择哪种没有对或错，这完全取决于你想要达到的效果。

CSS 动画

用CSS制作动画是让元素在屏幕上移动的最简单方法。

这里将从如何让元素在 X 和 Y 轴上移动 50px 简单示例开始，通过持续 1 秒的 CSS 过渡来移动元素。

.box {
   
  -webkit-transform: translate(0, 0);
  -webkit-transition: -webkit-transform 1000ms;

  transform: translate(0, 0);
  transition: transform 1000ms;
}

.box.move {
   
  -webkit-transform: translate(50px, 50px);
  transform: translate(50px, 50px);
}