effeckt.css入门-了解文档?

effeckt.css入门-了解文档?,css,css-transitions,Css,Css Transitions,我想使用一些按钮和屏幕外导航,我可以看到它被整齐地安排成模块化的 我已经克隆了这个项目,但我真的不知道如何作为一个用户开始——这些文档似乎是针对贡献者的 假设我只想包括一个按钮。我已尝试将demo.autoprefixed.css和effeckt.autoprefixed.css文件复制到我自己的项目中,然后执行以下操作: <link rel="stylesheet" href="assets/css/m.autoprefixed.css"> <link rel="st

我想使用一些按钮和屏幕外导航,我可以看到它被整齐地安排成模块化的

我已经克隆了这个项目,但我真的不知道如何作为一个用户开始——这些文档似乎是针对贡献者的

假设我只想包括一个按钮。我已尝试将
demo.autoprefixed.css
effeckt.autoprefixed.css
文件复制到我自己的项目中,然后执行以下操作:

  <link rel="stylesheet" href="assets/css/m.autoprefixed.css">
  <link rel="stylesheet" href="assets/css/effeckt.autoprefixed.css">
  ...
  <div class="button-demo-wrap">
    <button class="effeckt-button slide-left"><span class="label">Slide Left</span> <span class="spinner"></span></button>
  </div>

...
向左滑动

这是行不通的,它包含了很多代码,我不需要一个按钮。如何开始这个项目?

这似乎与JavaScript有关

我检查了这个网站,它似乎是一个css框架,需要一些Javascript来触发动画。 在buttons.JS中找到了以下代码(也在JS Fiddle中),该代码在其演示站点上引用

我在这里制作了一个关于如何使用这些按钮的示例演示:

有关部分如下:

$('.effeckt-button').on( 'click', function(){
    showLoader(this);
});

function showLoader(el) {
    var button = $(el),
        resetTimeout;

    if(button.attr( 'data-loading' )){
        button.removeAttr( 'data-loading' );
    } 
    else {
        button.attr( 'data-loading', true );
    }

    clearTimeout( resetTimeout );
    resetTimeout = setTimeout( function() {
        button.removeAttr( 'data-loading' );
    }, 2000 );
}