使いやすいCSS3トランジションマネージャー_html/css_WEB-ITnose

来自： https://github.com/usablica/lup

Lup

​​

使いやすいCSS3トランジションマネージャー

Lupisは、CSS3トランジションを管理および制御するための軽量で使いやすいライブラリです。

Hello world

//take `#test` element, add `green` css class and wait for 2 seconds, then remove all css classeslup("#test").add('green').wait(2000).end();

API

lup(targetElement)

lup オブジェクトを作成するには

利用可能バージョン: v0.1.0

パラメータ:

• targetElement: 文字列またはオブジェクト

  CSS セレクターまたはDOM オブジェクト

戻り値:

• lup object.

例:

lup('#test');lup(document.querySelector('#test'));

lup.add(className)

指定された CSS クラス名をターゲット要素に追加します

使用可能バージョン:v0.1.0

パラメータ:

• className: String

Returns:

• lup object.

例:

lup('#test').add('green').end();

lup.remove([className])

ターゲット要素から指定された CSS クラス名を削除します

利用可能日:v0 .1.0

Parameters:

• className: String (オプション)

Returns:

• lup object.

Example:

lup('#test').add('green').remove().end(); /* Removes `green` class */lup('#test').add('green').remove('green').end(); /* Same as previous line, removes `green` class */lup('#test').add('green').add('red').remove().end(); /* Removes `red` class */

lup.then([fn])

最後の操作が完了するまで待ちます。たとえば、CSS3 トランジションです。

利用可能以降:v0.1.0

Parameters:

• fn: Function (optional)

Returns:

• lup オブジェクト。

Example:

lup('#test').add('green').then().add('red').end(); /* Adds `green` and then after completing `green` class transition, adds `red` class */lup('#test').add('green').then(function(){ alert('green completed!') }).end(); /* Adds `green`, shows `alert` after completing transition*/

lup.wait(ミリ秒) )

待ってから次の操作を実行します。

利用可能バージョン:v0.1.0

パラメータ:

• ミリ秒: Number

戻り値:

• lup オブジェクト。

例:

りー

lup.end ([fn])

操作を実行します。

使用可能日:v0.1.0

Parameters:

• fn: Number

Returns:

• lup オブジェクト。

例:

ルリー

ルプ。 option(option, value)

lup オブジェクトに単一のオプションを設定します。

利用可能バージョン: v0.1.0

パラメータ:

• option : 文字列オプションキー名。

• value : 文字列/数値の値オプション。

戻り値:

• lup オブジェクト。

例:

lup('#test').add('green').wait(1000).add('red').end(); /* Adds `green` and after one second adds `red` class */

lup.options(options)

lup オブジェクトにオプションのグループを設定します。

利用可能: v0.1.0

パラメータ:

• options : Object 値を持つオプション キーを含むオブジェクト。

Returns:

• lup オブジェクト。

例:

lup('#test').add('green').end(); /* Adds `green` css class */

Options:

• cleanup :デフォルトでブール値および true - Cleanタイムラインの最後にすべての CSS クラスがありますか?

注: option メソッドと options メソッドを使用してオプションを変更できます。

ロードマップ

• 複数のターゲット要素をサポート
• さらに例を追加

リリース履歴

• v0.1.0 - 2014-06-06
  • 初期バージョン

著者

アフシン・メヘラーバーニ

• Twitter
• Github
• 個人ページ

ライセンス

Copyright (C) 2014 Afshin Mehrabani ( afshin.meh@gmail.com )

lup("#test").add('green').option('cleanup', false).end();