将第三方动画库集成到项目

创建基于CSS的动画和过渡可能是一个挑战。它们可能很复杂且耗时。是否需要进行一个很少时间来调整完美过渡的项目？考虑使用现成的动画等待使用的第三方CSS动画库。但是，您可能在想：它们是什么？他们提供什么？我如何使用它们？

好吧，让我们找出答案。

一个（一种）简短的历史：悬停

曾经有一段时间，悬停状态的概念就是今天提供的概念。实际上，对光标传递在元素顶部的反应的想法或不存在。提出并实施了提供此功能的不同方法。在某种程度上，这个小型功能为CSS能够为页面上的元素提供动画的想法打开了大门。随着时间的流逝，这些功能可能会增加复杂性，从而导致CSS动画库。

Macromedia的Dreamweaver于1997年12月推出，并提供了一个简单的功能，即悬停的图像交换。此功能是用JavaScript函数实现的，该功能将由编辑器嵌入HTML中。该功能名为MM_SWAPIMAGE（），已成为Web Design的一些民俗。即使在Dreamweaver之外，这也是一个易于使用的脚本，而且它的受欢迎程度仍导致它仍在使用。在我对本文的最初研究中，我发现了一个与此功能有关的问题，从2018年开始，关于Adobe的Dreamweaver （Adobe在2005年收购了Macromedia）帮助论坛。

JavaScript函数将通过基于MouseOver和MouseOut事件更改SRC属性将图像与另一个图像交换。实施时，看起来像这样：

 <a href="%E2%80%9C%EF%BC%83%E2%80%9D" onmouseout="“" mm_swapimgrestore onmouseover="“" mm_swapimage>
  <img  src="%E2%80%9C" ointernimage.jpg name="“" imagename    style="max-width:90%" height="“" border="“" alt="将第三方动画库集成到项目" >
</a>

按照当今的标准，使用JavaScript实现这一目标非常容易，我们中的许多人实际上可以在睡眠中做到这一点。但是，请考虑到JavaScript当时仍然是这种新的脚本语言（1995年创建），有时从浏览器到浏览器看上去和行为不同。创建跨浏览器JavaScript并不总是一件容易的事，并不是每个人都创建网页甚至写JavaScript。 （虽然这确实发生了变化。）Dreamweaver通过编辑器中的菜单提供了此功能，并且网络设计师甚至不需要编写JavaScript。它基于一组“行为”，可以从不同选项的列表中选择。这些选项可以通过一组目标浏览器过滤； 3.0浏览器，4.0浏览器，I 3.0，I 4.0，Netscape 3.0，Netscape 4.0。啊，过去的美好时光。

Dreamweaver首次发布后约一年，W3C的CSS2规范提到了：在1998年1月的工作草案中悬停。在锚点链接方面是特别提到的，但该语言表明它可能已应用于其他元素。出于大多数目的，似乎这个伪选择器将是MM_SWAPIMAGE（）的简单替代方案的开始，因为背景图像在同一草稿中。尽管浏览器支持是一个问题，因为花了数年的时间才能适当地支持CSS2，以使其成为许多网页设计师的可行选择。终于有了CSS2.1的W3C建议，这可能被认为是我们所知道的“现代” CSS的基础，该基础于2011年6月发布。

在这一切的中间， JQuery出现在2006年。幸运的是，JQuery在简化不同浏览器中的Javascript方面走了很长一段路。我们的故事感兴趣的一件事，第一个版本的jQuery提供了Animate（）方法。使用此方法，您可以随时在任何元素上对CSS属性进行动画动画。不只是悬停。由于其纯粹的知名度，这种方法暴露了对浏览器中更坚固的CSS解决方案的需求 - 这种解决方案不需要由于浏览器限制而导致的JavaScript库，该解决方案并不总是非常性能。

：悬停的伪级仅提供从一个州到另一个州的硬交换，而没有支持平稳过渡。它也不能使元素之外的元素变化像悬停在元素上的基本内容之外。 JQuery的Animate（）方法提供了这些功能。它铺平了道路，没有回头路。随着网络开发的动态世界的发展，解决此问题的工作草案在发布CSS2.1的推荐之前就已经进行了。 W3C于2009年3月首次发布了CSS Transitions Module 3级的第一个工作草案。CSS动画模块3级的第一个工作草案大约在同一时间发布。截至2018年10月，这两个CSS模块仍处于工作选秀状态，但是当然，我们已经大量使用它们

因此，首先是由第三方提供的JavaScript函数（仅用于简单的悬停状态）导致CSS中的过渡和动画，这些函数允许进行精心制作和复杂的动画 - 许多开发人员不一定希望考虑的复杂性，因为他们需要快速在新项目上移动。我们走了一圈；如今，已经创建了许多第三方CSS动画库来抵消这种复杂性。

三个不同类型的第三方动画库

我们在这个新世界中能够在网页和应用程序中具有强大，令人兴奋和复杂的动画。关于如何处理这些新任务的几个不同的想法已经走到了最前沿。并不是说一种方法比其他任何方法都更好。确实，每个都有很多重叠。区别更多是关于我们如何为他们实施和编写代码。有些是全javascript的库，而另一些则是仅CSS的藏品。

JavaScript库

仅通过JavaScript运行的库通常提供超出Common CSS动画提供的功能。通常，由于图书馆实际上可能使用CSS功能作为引擎的一部分，因此存在重叠，但是将其抽象为有利于API。此类库的示例是Greensock和Anime.js。您可以通过查看他们提供的演示来看到他们提供的内容（Greensock在Codepen上有一个不错的收藏）。它们主要用于高度复杂的动画，但对于更基本的动画也很有用。

JavaScript和CSS库

有一些第三方库主要包括CSS类，但提供了一些JavaScript，以方便您项目中的类别。一个库Micron.js提供了可以在元素上使用的JavaScript API和数据属性。这种类型的库允许您轻松使用可以从中选择的预制动画。另一个库Motion UI旨在与JavaScript框架一起使用。虽然，它也适用于JavaScript API，预构建类和数据属性的混合物的类似概念。这些类型的库提供了预先构建的动画，也可以简单地将它们汇总。

CSS库

第三种库仅是CSS。通常，这只是您通过HTML中的链接标签加载的CSS文件。然后，您可以应用并删除特定的CSS类，以利用提供的动画。这种类型的库的两个示例是Animate.css和Anmista。也就是说，这两个特定库之间甚至存在重大差异。 Animate.css是一个总CSS软件包，而Animista提供了一个光滑的接口，可以选择您想要的动画使用提供的代码。这些库通常很容易实现，但是您必须编写代码以利用它们。这些是本文将重点关注的图书馆的类型。

三种不同类型的CSS动画

是的，有一个模式；毕竟，三分之一的规则无处不在。

在大多数情况下，使用第三方库时，有三种类型的动画需要考虑。每种类型都适合不同的目的，并有不同的方法来利用它们。

悬停动画

这些动画旨在涉及某种悬停状态。它们通常与按钮一起使用，但另一种可能性是使用它们来突出显示光标恰好打开的部分。它们也可以用于焦点状态。

注意动画

这些动画旨在用于通常在查看页面的人的视觉中心之外的元素上。动画应用于需要注意的显示部分。对于需要最终关注但本质上不可怕的事物而言，这种动画本质上可能是微妙的。当需要立即注意时，他们也可能会分散注意力。

过渡动画

这些动画通常旨在使视图中的另一个元素替换，但也可以用于一个元素。这些通常包括一个动画，用于“离开”视图和镜像动画以“输入”视图。考虑一下逐渐消失。

因此，让我们介绍每种类型的动画以及如何使用它们的示例。

让我们悬停！

某些库可能已经设置为悬停效果，而有些则将悬停状态作为其主要目的。一个这样的库就是Hover.css，它是一个插入解决方案，它提供了通过类名称应用的一系列悬停效果。但是，有时候，我们想在图书馆中使用动画，该库不直接支持：悬停伪级，因为这可能与全球样式相抵触。

在此示例中，我将使用Animate.css提供的TADA动画。它的目的更多是寻求注意力的人，但是对于此示例来说，它足够了。如果您要浏览库的CSS，您会发现没有：悬停伪级。因此，我们必须自己以这种方式使它起作用。

TADA班本身就是这样：

 .tada {
  动画名称：tada;
}

使此反应悬停状态反应的低矮方法是制作我们自己的本班的本地副本，但将其扩展一点。通常，Animate.css是一个倒入解决方案，因此我们不一定可以选择编辑原始CSS文件。尽管您愿意，但您可以拥有自己的本地副本。因此，我们仅创建我们需要不同的代码，并让库处理其余的代码。

 .TADA-HOVER：HOVER {
  动画名称：tada;
}

如果我们实际上想在其他地方使用它，我们可能不应该覆盖原始类名。因此，相反，我们进行了一种变体，可以将悬停伪级放在选择器上。现在，我们将库所需的动画类以及我们的自定义TADA-HOVER类使用的元素，它将在Hover上播放该动画。

如果您不想以这种方式创建自定义类，但更喜欢JavaScript解决方案，那么有一种相对简单的方法来处理它。奇怪的是，这与我们之前讨论的Dreamweaver的MM_ImagesWap（）方法类似。

 //让我们使用ID #JS_EXAMPLE选择元素
var js_example = document.queryselector（'＃js_example'）;

//当悬停使用ID #JS_Example的元素时...
js_example.addeventlistener（'MouseOver'，function（）{
  // ...让我们在元素中添加两个类：动画和tada ...
  this.classlist.add（'animated'，'tada'）;
}）;
// ...然后当鼠标不在元素上时删除这些类。
js_example.addeventlistener（'鼠标out'，function（）{
  this.classlist.remove（'animated'，'tada'）;
}）;

实际上，有多种方法可以根据上下文来处理此问题。在这里，我们创建了一些事件侦听器，以等待鼠标折叠和鼠标输出事件。然后，这些听众根据需要申请并删除库的动画和TADA类。如您所见，扩展第三方图书馆可以以相对容易的方式完成我们的需求。

我可以请您注意吗？

第三方库可以帮助的另一种动画是寻求注意者。这些动画很有用，因为您希望将注意力集中在页面的元素或部分。其中一些示例可能是通知或未填写所需的表格输入。这些动画可以是微妙的或直接的。微妙的是，当某些东西最终需要关注但不需要立即解决。直接何时需要解决问题。

一些库将这样的动画作为整个软件包的一部分，而有些则是专门为此目的而构建的。 Animate.css和Animista都有注意动画的关注，但它们并不是这些图书馆的主要目的。为此目的构建的库的一个示例是CSShake。要使用的哪个库取决于项目的需求以及您希望投资多少时间来实施它们。例如，CSShake准备好在您的方面遇到麻烦 - 只需根据需要应用课程即可。虽然，如果您已经在使用andimate.css之类的库，那么您可能不想引入第二个库（用于性能，依赖依赖项等）。

因此，可以使用anistate.css之类的库，但需要更多设置。图书馆的github页面有有关如何执行此操作的示例。根据项目的需求，将这些动画作为寻求注意力的人实施很简单。

对于一种微妙的动画类型，我们可以拥有一个只需重复一系列次数并停止的动画。这通常涉及添加库的类，将动画迭代属性应用于CSS，并等待动画结束事件清除库的类。

这是一个简单的示例，遵循我们之前对悬停状态进行的相同模式：

 var pulse = document.queryselector（'＃pulse'）;

函数playpulse（）{
  pulse.classlist.add（'animated'，'pulse'）;
}

pulse.addeventListener（'animationEnd'，function（）{
  pulse.classlist.remove（'animated'，'pulse'）;
}）;

playpulse（）;

当调用播放函数时，应用库类。 AnimationEnd事件有一个事件侦听器，可以删除库的类。通常，这只会播放一次，但是您可能需要在停止之前多次重复。 Animate.css不能为此提供课程，但是将CSS属性应用于我们的元素来处理它很容易。

 #pulse {
  动画题计：3; / *三次后停止 */
}

这样，动画将在停止之前播放3次。如果我们需要尽快停止动画，我们可以手动删除AnimationEnd函数之外的库类。图书馆的文档实际上提供了一个可重复使用功能的示例，用于应用动画后删除它们的类。与上述代码非常相似。将其扩展到将迭代计数应用于元素时甚至很容易。

对于更直接的方法，假设一个无限动画，直到发生某种用户互动后才会停止。让我们假装单击元素是启动动画的原因，然后单击再次停止它。请记住，无论您还是希望开始并停止动画取决于您。

 var bounce = document.queryselector（'＃bounce'）;

bounce.addeventListener（'click'，function（）{
  如果（！bounce.classlist.contains（'animated'））{
    bounce.classlist.add（'动画'，'bounce'，'infinite'）;
  } 别的 {
    bounce.classlist.remove（'动画'，'bounce'，'infinite'）;
  }
}）;

足够简单。如果应用了库的“动画”类，单击元素测试。如果没有，我们将应用图书馆类，以便启动动画。如果有课程，我们将其删除以停止动画。请注意，在阶级列表结束时，无限班级。值得庆幸的是，Animate.css为我们提供了此功能。如果您选择的库不提供这样的课程，那么这就是您在CSS中需要的：

 #bounce {
  动画题计：无限；
}

这是一个演示，显示了该代码的行为：

将东西移开

在研究本文时，我发现过渡（不要与CSS过渡混淆）很容易成为第三方库中最常见的动画类型。这些是构建的简单动画，可以允许元素输入或离开页面。现代单页应用程序中看到的一个非常常见的模式是让一个元素离开页面，而另一个元素通过输入页面替代了页面。想一想第一个元素逐渐消失，第二种褪色。这可能是用新数据替换旧数据，以序列移至下一个面板，或用路由器从一个页面移到另一页。莎拉·德拉斯纳（Sarah Drasner）和乔治·马尔凯克（Georgy Marchuk）都有很好的例子，说明了这类过渡。

在大多数情况下，动画库将无法提供在过渡动画期间删除和添加元素的方法。提供其他JavaScript的库实际上可能具有此功能，但是由于大多数没有，我们将讨论如何处理此功能。

插入一个元素

在此示例中，我们将再次将Animate.css用作我们的库。在这种情况下，我将使用Fadeindown动画。

现在，请记住有很多方法可以处理将元素插入DOM，我不想在这里介绍它们。我将展示如何利用动画使插入更加更好，更自然，而不是简单地弹出视图。对于Animate.css（可能是许多其他库），使用动画插入元素非常容易。

令插入= document.createelement（'div'）;
insertelement.innertext ='此div已插入';
insertelement.classlist.add（'animated'，'fadeindown'）;

insertelement.AddeventListener（'AnimationEnd'，function（）{
  this.classlist.remove（'animated'，'fadeindown'）;
}）;

document.body.append（插入）;

但是，您决定创建元素并不重要。您只需要确保在插入元素之前已经应用了所需的类。然后，它可以很好地安装到位。我还包括了一个删除课程的AnimationEnd活动的活动听众。像往常一样，有几种方法可以做到这一点，这可能是处理它的最直接方法。删除课程的原因是，如果我们愿意，可以更轻松地扭转过程。我们不希望进入动画与离开动画竞争。

删除单个元素

删除单个元素类似于插入元素。元素已经存在，因此我们只应用所需的动画类。然后，在AnimationEnd事件中，我们从DOM中删除元素。在此示例中，我们将使用Animate.css的FadeOutDown动画，因为它可以与Fadeindown动画一起使用。

令removelement = document.queryselector（'＃removeElement'）;

removelement.AddeventListener（'animationEnd'，function（）{
  this.remove（）;
}）;

removelement.classlist.add（'animated'，'fadeoutdown'）;

如您所见，我们针对元素，添加类，然后在动画末端删除元素。

所有这一切的问题是，通过以这种方式插入和删除元素会导致页面上的其他元素跳动进行调整。您必须以某种方式来考虑这一点，很可能在CSS和页面的布局中为元素留出恒定的空间。

走开我的路，我来了！

现在，我们将交换两个元素，一个要换成另一个元素。有几种处理此操作的方法，但是我将提供一个示例，从本质上讲，将前两个示例结合在一起。

我将详细介绍JavaScript，以解释其工作原理。首先，我们缓存了对两个元素的按钮和容器的引用。然后，我们创建两个盒子，这些框将交换在容器中。

令button = document.queryselector（'button'）;
令container = document.queryselector（'。container'）;
令box1 = document.createelement（'div'）;
令box2 = document.createelement（'div'）;

我有一个通用功能，可用于删除每个AnimationEnd事件的动画类。

令removeClasses = function（）{
  box1.classlist.remove（'动画'，'fadeoutright'，'fadeinleft'）;
  Box2.Classlist.Remove（'animated'，'fadeoutright'，'fadeinleft'）;
}

下一个功能是交换功能的大部分。首先，我们确定正在显示的当前框。基于此，我们可以推断出离开和进入元素。离开元素会获得事件侦听器，该侦听器首先删除了称为SwitchElements功能，因此我们不会在动画循环中发现自己。然后，由于动画完成了，我们从容器中删除了离开元素。接下来，我们将动画类添加到输入元素并将其附加到容器中，以便将其动画到位。

令switchElements = function（）{
  令CurrentElement = document.queryselector（'。container .box'）;
  让weftElement = CurrentElement.ClassList.Contains（'Box1'）？ Box1：box2;
  令enterlement = weftElement === box1？ Box2：Box1;
  
  wellElement.RemoveEventListener（'AnimationEnd'，SwitchElements）;
  weftElement.Remove（）;
  Enterlement.Classlist.Add（'animated'，'fadeinleft'）;
  container.append（Enterlement）;
}

我们需要为两个框进行一些通用设置。另外，我们将第一个盒子附加到容器中。

 box1.classlist.add（'box'，'box1'）;
Box1.AddeventListener（'AnimationEnd'，removeClasses）;
Box2.Classlist.Add（'Box'，'Box2'）;
Box2.AddeventListener（'AnimationEnd'，removeClasses）;

Container.AppendChild（Box1）;

最后，我们有一个点击事件的侦听器，可以使用该按钮进行切换。从技术上讲，这些事件的序列如何开始取决于您。对于此示例，我决定单击一个简单的按钮。我找出当前正在显示的框，将要离开哪个框，以应用适当的类以使其动画。然后，我将一个事件侦听器用于AnimationEnd事件，该事件调用上面显示的SwitchElement函数，该功能处理实际交换。

 button.AddeventListener（'click'，function（）{
  令CurrentElement = document.queryselector（'。container .box'）;
  
  if（currentelement.classlist.contains（'box1'））{
    box1.classlist.add（'animated'，'fadeoutright'）;
    Box1.AddeventListener（'AnimationEnd'，SwitchElements）;
  } 别的 {
    box2.classlist.add（'animated'，'fadeoutright'）;
    box2.AddeventListener（'AnimationEnd'，SwitchElements）;
  }
}

这个示例的一个明显问题是，对于这种情况，它非常刻板地编码。虽然，在不同情况下，它很容易扩展和调整。因此，该示例在理解处理此类任务的一种方法方面很有用。值得庆幸的是，一些动画库（例如MotionUi）提供了一些JavaScript，以帮助元素过渡。要考虑的另一件事是，某些JavaScript框架（例如Vuejs）具有有助于动画元素过渡的功能。

我还创建了另一个提供更灵活的系统的示例。它由一个容器组成，该容器存储引用以离开并输入具有数据属性的动画。该容器包含两个元素，这些元素将打开命令的位置。构建此示例的方式是，通过JavaScript在数据属性中很容易更改动画。我在演示中也有两个容器。一个使用Animate.css，另一个使用Animista进行动画。这是一个很大的例子，所以我不会在这里检查代码。但是它对它进行了大量评论，因此，看看是否有兴趣。

花点时间考虑…

每个人都真的想看所有这些动画吗？有些人可以考虑我们的动画过高和不必要的，但是对于某些人来说，他们实际上可能引起问题。不久前，Webkit引入了偏爱的动作媒体查询，以协助可能的前庭谱系障碍问题。埃里克·贝利（Eric Bailey）还发布了媒体查询的不错介绍，以及对最佳实践的考虑。绝对阅读这些。

那么，您的动画库是否支持偏爱的动作？如果文档没有说它确实如此，那么您可能必须假设它不会。虽然，很容易检查库的代码以查看是否有媒体查询的内容。例如，Animate.css在_base.scss部分文件中具有它。

 @Media（print），（预先降低的动作）{
  。
    动画：不设置！
    过渡：无！
  }
}

如果图书馆不支持它，那么这一点代码还提供了一个很好的示例。如果库有一个通用类，它使用的是Animate.css使用“动画”，那么您就可以针对该类。如果它不支持此类类，则您必须定位实际的动画类或为此目的创建自己的自定义类。

 .scale-up-center {
  动画：尺度上的0.4s立方bezier（0.390，0.575，0.565，1.000）均两者；
}

@KeyFrames缩放式中心{
  0％{变换：比例尺（0.5）; }
  100％{变换：比例（1）; }
}

@Media（print），（预先降低的动作）{
  .scale-up-center {
    动画：不设置！
    过渡：无！
  }
}

如您所见，我只是使用了Animate.css提供的示例，并针对Animista的动画类。请记住，您必须为您选择从库中使用的每个动画类重复此操作。尽管在埃里克（Eric）的后续作品中，他建议将所有动画视为渐进式增强功能，这可能是减少代码并使用户体验更容易获得的一种方法。

让框架为您繁重

在许多方面，诸如React和Vue之类的各种框架可以使用第三方CSS动画制作，而不是使用Vanilla JavaScript，这主要是因为您不必手动汇总类交换或AnimationEnd事件。您可以利用框架已经提供的功能。使用框架的优点在于，它们还提供了几种不同的方法来处理这些动画，具体取决于项目的需求。下面的示例只是选项的一个小例子。

悬停效果

对于悬停效果，我建议用CSS（如上所述）将它们设置为更好的方法。如果您确实需要在框架中（例如Vue）中使用JavaScript解决方案，那将是这样的：

 <button over event well>
  塔达
</button>

方法： {
  结束：函数（e，type）{
    e.target.classlist.add（'animated'，type）;
  }，，
  离开：功能（e，type）{
    e.target.classlist.remove（'animated'，type）;
  }
}

与上面的香草JavaScript解决方案没有太大不同。另外，像以前一样，有很多处理此问题的方法。

注意者

设置引人注目的人实际上更容易。在这种情况下，我们只是使用VUE以示例来应用所需的类：

 <div>脉冲</div>

<div>弹跳</div>

在脉冲示例中，每当布尔斯iSpulse为真时，都会应用这两个类。在弹跳示例中，每当布尔值isbounce为真时，都会应用动画和弹跳类。无论如何，都可以使用无限的阶级，因此我们可以进行永无止境的弹跳，直到isbounce boolean恢复为虚假。

过渡

值得庆幸的是，Vue的过渡组件提供了一种使用自定义过渡类使用第三方动画类的简便方法。其他库，例如React，可以提供类似的功能或附加组件。为了利用VUE中的动画类，我们只是在过渡组件中实现它们。

 
  <div v-if="“" toggle key="“" if>如果exam​​ple </div>
  <div v-else key="“" else> else示例</div>

使用Animate.css，我们仅应用必要的类。对于企业，我们将与Fadeindown一起应用所需的动画课。对于休假活动，我们将应用所需的动画班以及vadeoutdown应用。在过渡序列期间，这些类在适当的时间插入。 Vue为我们处理和删除课程的插入和删除。

有关在JavaScript框架中使用第三方动画库的更复杂示例，请探索此项目：

加入聚会！

这是等待您项目的可能性的一种小品味，因为那里有许多第三方CSS动画库可以探索。有些是彻底，怪异的，特定的，令人讨厌的，或者只是直率的。有用于复杂JavaScript动画的库，例如Greensock或Anime.js。甚至有库可以针对元素中的字符。

希望所有这些都会激发您在创建自己的CSS动画的途中使用这些图书馆。

以上是将第三方动画库集成到项目的详细内容。更多信息请关注PHP中文网其他相关文章！