舍弃应用jQuery完成动漫

2021-04-01 18:46


舍弃应用jQuery完成动漫


短视頻,自新闻媒体,达人种草1站服务

在 Web开发设计的圈子里,开发设计者经常觉得CSS动漫是1种高特性web动漫技术性,假如想让网页页面载入的更快1些,就应当用纯CSS动漫。实际上这类见解是不正确的, 许多开发设计者早就舍弃了javascript的动漫,驱使自身应用繁杂的CSS款式来完成同样实际效果的UI互动。她们彻底忽略了javascript带来的更 好的互动性。

但客观事实是根据javascript的动漫实际效果一般和根据css的动漫1样快,一些乃至更快1些。CSS动漫一般被感觉较为快,由于大家一直拿它和jQuery动漫相比,实际上慢的是jQuery的$.animate(),但是javascript的动漫库防止了DOM实际操作,经常比jQuery快20倍上下。

因此,让大家1起破碎那个谣传,写1些真正的事例,来评定1下javascript动漫的特性。

为何要应用JavaScript?

把特性变换到款式中的情况下用CSS十分便捷,并且在不应用其它库的状况下,它们也能出示优异的主要表现。可是当你应用CSS来完成繁杂的设计方案时,它们变的十分不便。

总而言之,CSS1定会限定你的设计方案。可是假如你应用javascript,便可以从逻辑性上处理这些难题。javascript的动漫模块出示以下作用:

跨访问器的 SVG 适用

根据物理学学的动漫载入

時间轴操纵,

Bezier translations

提醒:假如你对javascript的展现实际效果较为感兴趣爱好,能够读1下Julian Shapiro的 CSS vs. JS Animation: Which Is Faster? 和Jack Doyle的 Myth Busting: CSS Animations vs. JavaScript. 。假如想看1些演试,能够看看 performance pane 和 Library Speed Comparison 。

Velocity 和 GSAP

两个最常见的javascript动漫库是 Velocity.js 和 GSAP。这些库在应用jQuery的情况下并沒有特性消耗,由于它们都沒有应用jQuery的动漫栈。

假如你在网页页面中务必应用jQuery,你能够用Velocity和GSAP来替代你的jQuery $.animate()。例如

$element.animate({ opacity:0.5});

能够写成:

$element.velocity({ opacity:0.5}).

这两个库也自然还可以在沒有jQuery的情况下应用:

/* Working without jQuery */

Velocity(element,{ opacity:0.5},1000);// Velocity

TweenMax.to(element,1,{ opacity:0.5});// GSAP

像上面的事例1样,即全不应用jQuery,Velocity也保存了和jQuery的$.animate()相近的英语的语法。

GSAP和它相反,根据朝向目标的设计方案,更便捷了对静态数据方式的启用。你能够对动漫开展全面的操纵。

在这两种处理计划方案中,你都不容易用到jQuery的目标元素,可是假如是要实际操作初始的DOM结点呢?你能够根据

document.getElementByID

document.getElementsByTagName

document.getElementsByClassName

document.querySelectorAll

这些相近于jQuery s selector的完成。下面大家会对这些方式开展简易的详细介绍。

避免jQuery

提醒:假如你必须掌握jQuery的$.animate(),能够看看 Velocity s documentation.。

让大家看看querySelectorAll的作用::

document.querySelectorAll("body");// Get the body element

document.querySelectorAll(".squares");// Get all elements with the "square" class

document.querySelectorAll("div");// Get all divs

document.querySelectorAll("#main");// Get the element with an id of "main"

document.querySelectorAll("#main div");// Get the divs contained by "main"

向编码展现的1样,你能够根据querySelectorAll简易的开展对CSS的挑选。它会在数字能量数组中回到全部配对的元素:

/* Get all div elements. */

var divs = document.querySelectorAll("div");

/* Animate all divs at once. */

Velocity(divs,{ opacity:0.5},1000);// Velocity

TweenMax.to(divs,1,{ opacity:0.5});// GSAP

由于大家沒有应用jQuery的目标元素,你将会会好奇心大家应当如何把动漫连接起来,实际上大家能够这样做:

$element // jQuery element object

.velocity({ opacity:0.5},1000)

.velocity({ opacity:1},1000);

在 Velocity中,你能够像这样简化你的编码:

/* These animations automatically chain onto one another. */

Velocity(element,{ opacity:0.5},1000);

Velocity(element,{ opacity:1},1000);

这样来解决动漫就不容易存在特性上的消耗。你会发现它javascript的特性真的和CSS类似,并且实际操作更便捷。

极客标识 - 技术专业和精确的共享,关心你感兴趣爱好的极客,小区出示超棒的精品实例教程,互动交流讲课

掌握前端开发技术性,请浏览极客互动交流课程库和编码录播

原文来自:舍弃应用jQuery完成动漫




扫描二维码分享到微信

在线咨询
联系电话

020-66889888