Effeckt.css 高性能的过渡和动画库

发布于 2020-07-19 09:37:38 字数 6786 浏览 1583 评论 0

Effeckt.css 是一个集合了众多新鲜而又实用的 CSS/jQuery 动画效果应用，既适用于网站也适用于手机 Web 开发，例如：弹窗、按钮、导航、列表、页面切换等等，这些特效动画都能给你的网站提升一定用户体验，而且简单实用。

特点

Effeckt.css 的目标就是把所有基于 CSS/jQuery 动画的应用集中起来。其特点：

UI较少，只专注于转换/动画；
具有优雅、合理的动态效果；
创建浏览器支持指南；
CSS 性能回归测试；
针对目标浏览器/设备提供 jank-free 60fps；
如果某个功能不能达到性能目标，可以排除这个功能；
有如何避免影响到其它样式元素指南（避免expensive css）
提供一个 builder，用户可以根据他们的需要来推送css
移动设备上是没有悬浮效果的，所以任何基于悬浮特效的都将被排除在外或者是有一个点击的动作特效。

项目初衷

为移动Web网站开发和设计UI并不是件容易的事情，尤其是在60fps下传输和执行。最理想的做法就是基于手机/平板电脑的CSS过渡和关键帧动画来进行jank-free转换，特别是利用硬件和透明度的变化来加速转换。

目前，网上有大量基于CSS转换的实验和示例，但它们都过于分散，而 Effeckt.css 的目标就是把所有基于CSS/jQuery动画的应用集中起来。

使用方法

你可以随意改进它，改正错误，纠正错误，语法错误等等，为了使用Effeckt Modal，您需要遵循以下步骤。

引入依赖文件

CSS

<link rel="stylesheet" type="text/css" href="./effeckt/modal.css">

注意：你任然可以应用你自己的样式表。

JavaScript

<!-- jQuery handle all the events and DOM manipulation -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<!-- Core or Global stuff, mainly to know if we need a click or touch event -->
<script type="text/javascript" src="./effeckt/core.js"></script>
<!-- This object helps to control the modals, it's kind of optional, kind of -->
<script type="text/javascript" src="./effeckt/modal.js"></script>

Modal Structure

<div class="effeckt-wrap effeckt-modal-wrap [effeckt-type (Recommended)]" id="effeckt-modal-wrap">
  <div class="effeckt-content effeckt-modal" id="effeckt-modal">
    <h3>Modal Dialog</h3>
    <div class="effeckt-modal-content">
      <p>This is a modal window.</p>
      <button class="effeckt-modal-close">Close me!</button>
    </div>
  </div>
</div>

这个 effeckt type 类是可选的，但建议这样做，因此它防止了大约300 ms的延迟。如果您不喜欢这样做，请将它们作为属性添加到触发器元素中。

按钮触发Modal窗口

添加 .effeckt-modal-button 类设置为任何要触发模式的元素。但什么模式？默认情况下，它会查找 #effeckt-modal-wrap 可以通过添加覆盖它。data-effeckt-trigger="[selector]" 作为属性。你想让它发挥什么作用？如果不希望将其作为类添加到模态元素上，则需要将其作为属性添加到触发器按钮上，如下所示：data-effeckt-type="[effeckt-type]".

若要关闭模态，请使用 .effeckt-modal-close 类或 [data-effeckt-dismiss="modal"] 属性将关闭它。

例子：

<a href="#" class="effeckt-modal-button"
  data-effeckt-type="from-below"
  data-effeckt-trigger="#modalWindow"
>
Open Modal
</a>

所有这些看起来都是这样的

<!doctype html>
<html>
  <head>
    <title>Effeckt Modal Window</title>
    <link rel="stylesheet" type="text/css" href="./effeckt/modal.css">
  </head>
  <body>
    <a href="#" class="effeckt-modal-button">Open it</a>
    <a href="#" class="effeckt-modal-button" data-effeckt-target="#effeckt-modal-wrap2">Open it</a>
    <a href="#" class="effeckt-modal-button" data-effeckt-target="#effeckt-modal-wrap3">Open it</a>
    <a href="#" class="effeckt-modal-button" data-effeckt-target="#effeckt-modal-wrap4">Open it</a>
    <a href="#" class="effeckt-modal-button" data-effeckt-type="from-above" data-effeckt-target="#effeckt-modal-wrap5">Open it</a>

    <div class="effeckt-wrap effeckt-modal-wrap from-below" id="effeckt-modal-wrap">
      <div class="effeckt-content effeckt-modal" id="effeckt-modal">
        <h3>Modal Dialog</h3>
        <div class="effeckt-modal-content">
          <p>This is a modal window.</p>
          <button class="effeckt-modal-close">Close me!</button>
        </div>
      </div>
    </div>

    <div class="effeckt-wrap effeckt-modal-wrap tada" id="effeckt-modal-wrap2">
      <div class="effeckt-content effeckt-modal" id="effeckt-modal">
        <h3>Second Modal Dialog</h3>
        <div class="effeckt-modal-content">
          <p>This is a second modal window.</p>
          <button class="effeckt-modal-close">Close me!</button>
        </div>
      </div>
    </div>

    <div class="effeckt-wrap effeckt-modal-wrap blur" id="effeckt-modal-wrap3">
      <div class="effeckt-content effeckt-modal" id="effeckt-modal">
        <h3>Third Modal Dialog</h3>
        <div class="effeckt-modal-content">
          <p>This is a third modal window.</p>
          <button class="effeckt-modal-close">Close me!</button>
        </div>
      </div>
    </div>

    <div class="effeckt-wrap effeckt-modal-wrap deep-content" id="effeckt-modal-wrap4">
      <div class="effeckt-content effeckt-modal" id="effeckt-modal">
        <h3>Fourth Modal Dialog</h3>
        <div class="effeckt-modal-content">
          <p>This is fourth a modal window.</p>
          <button class="effeckt-modal-close">Close me!</button>
        </div>
      </div>
    </div>

    <div class="effeckt-wrap effeckt-modal-wrap" id="effeckt-modal-wrap5"> <!-- for centering transform -->
      <div class="effeckt-content effeckt-modal" id="effeckt-modal">
        <h3>Fifth Modal Dialog</h3>
        <div class="effeckt-modal-content">
          <p>This is the fifth a modal window.</p>
          <button class="effeckt-modal-close">Close me!</button>
        </div>
      </div>
    </div>

    <div data-effeckt-page>
      page [main] content, some effeckt use this element
    </div>

    <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
    <script type="text/javascript" src="./effeckt/core.js"></script>
    <script type="text/javascript" src="./effeckt/modal.js"></script>
  </body>
</html>

一些 effeckt，如 deep-content 使用 main page container，它们都会得到动画效果。所以您的主包装器容器需要添加 data-effeckt-page 属性才能按预期工作。