Menu

Shape
A Shape is a three dimensional object displayed on a two dimensional plane

下载

类型

Shape

A Shape is a three dimensional object including any flat content as a side.

史蒂夫工作
史蒂夫工作 is a fictional character designed to resemble someone familiar to readers.
Joined in 2014 151个朋友
Stevie Feliciano
Joined in 2014
Stevie Feliciano is a library scientist living in New York City. She likes to spend her time reading, running, and writing.

多维数据集

A cube Shape is formatted so that each side is the face of a cube

1
2
3
4
5
6

文本

A text Shape is formatted to allow for sides of text to be displayed

使用Shape
  • A Shape must have defined 宽度 and 高度s for each side or else text flow may change during animation
  • 的 module uses 3D transformations which are currently only supported in modern versions of Chrome, Safari, 和火狐.
你知不知道? This side starts visible.
Help, its another side!
This is the last side

例子

Shape类型

Shapes do not have to be regular or have its sides match up in length and 宽度 to animate correctly.

Shape

汽车
广场
不规则的

Getting Started

Required Markup

Shapes can have any arbitrary content, just wrap each side in side

This side starts visible.
This is yet another side
This is the last side

Animating with Javascript

Animations use CSS3 transitions and Javascript to set-up the correct conditions.

Initializing a Shape

$('.Shape的).Shape();

过渡s automatically assume 下一个 side is the 下一个 sibling (or first if last element)

$('.Shape的).Shape('翻转了');

To manually set the 下一个 side to appear use a 选择器 or jQuery object

$('.Shape的) .Shape('set 下一个 边的, '.第二个.方”) .Shape('翻转了') ;

Any internal method can be invoked programmatically

$('.Shape的).Shape('重画');

行为

All the following behaviors can be called using the syntax:

$('.你的.元素”) .Shape('behavior The名字', argumentOne, argumentTwo) ;
行为 描述
翻转了 Flips the Shape upward
抛下 Flips the Shape downward
抛右 Flips the Shape right
翻转了 Flips the Shape left
Flips the Shape over clock-wise
翻转回来 Flips the Shape over counter-clockwise
set 下一个 side(选择器) Set the 下一个 side to a specific 选择器
是动画 Returns whether Shape is currently animating
重置 Removes all inline styles
queue(animation) Queues an animationtill after current animation
重画 Forces a reflow on element
set default side Set the 下一个 side to 下一个 sibling to active element
set stage size Sets Shape to the content size of the 下一个 side
刷新 Refreshes the 选择器 cache for element sides
get transform down Returns translation for 下一个 side staged below
get transform left Returns translation for 下一个 side staged left
get transform right Returns translation for 下一个 side staged right
get transform up Returns translation for 下一个 side staged up
get transform down Returns translation for 下一个 side staged down

Shape 设置
Shape settings modify the Shape's behavior

设置 默认的 描述
持续时间 700ms Duration of side change animation
宽度
2.2
最初的
当设置为 下一个 will use the 宽度 of the 下一个 side during the Shape's animation.
当设置为 最初的 it will use the 宽度 of the Shape at 最初的ization.
当设置为 a specifix pixel 高度, will force the 宽度 to that 高度.
高度
2.2
最初的
当设置为 下一个 will use the 高度 of the 下一个 side during the Shape's animation.
当设置为 最初的 it will use the 高度 of the Shape at 最初的ization.
当设置为 a specifix pixel 高度, will force the 高度 to that 高度.

回调
回调 specify a function to occur after a specific behavior.

设置 上下文 描述
beforeChange 下侧 Is called before side change
onChange 活动方 Is called after visible side change

DOM的设置
DOM settings specify how this module should interface with the DOM

设置 默认的 描述
名称空间 Shape Event 名称空间. Makes sure module teardown does not effect other events attached to an element.
选择器
选择器 : { 方:“.国”, 边:“.边的 }
类名称
类名称 : { animating : 'animating', hidden : 'hidden', loading : 'loading', active : 'active' }

Debug 设置
Debug settings controls 调试 output to the console

设置 默认的 描述
The名字 Shape Name used in 调试 logs
沉默 Silences all console output including 错误 messages, regardless of other 调试 settings.
调试 Provides standard 调试 output to console
性能 真正的 Provides standard 调试 output to console
详细的 真正的 Provides ancillary 调试 output to console
错误
错误:{ side : 'You tried to switch to a side that does not exist.', method : '的 method you called is not defined' }

调光器 消息
调光器 sub-header

友情链接: 1 2 3 4 5 6 7 8 9 10