Fx/Morph

优质

小牛编辑

118浏览

2023-12-01

Class: Fx.Morph

允许用多个css或一个css选择器设置动画.

语法:

var myFx = new Fx.Morph(element[, options]);

参数:

element - (mixed) 一个元素对象,或一个元素ID。
options - (object, optional) Fx选项对象。

(object) 一个新的Fx.Morph实例。

示例:

使用包含多个css样式的对象:

var myEffect = new Fx.Morph('myElement', {
    duration: 'long',
    transition: Fx.Transitions.Sine.easeOut
});
 
myEffect.start({
    'height': [10, 100], // Morphs the 'height' style from 10px to 100px.
    'width': [900, 300]  // Morphs the 'width' style from 900px to 300px.
});

使用包含多个css样式的对象,起始值省略:

var myEffect = new Fx.Morph('myElement', {
    duration: 'short',
    transition: Fx.Transitions.Sine.easeOut
});
 
myEffect.start({
    'height': 100, // Morphs the height from the current to 100px.
    'width': 300   // Morphs the width from the current to 300px.
});

使用css属性,代码与逻辑分开进非常有用:

var myEffect = new Fx.Morph('myElement', {
    duration: 'short',
    transition: Fx.Transitions.Sine.easeOut
});
 
myEffect.start({
    'height': 100, // Morphs the height from the current to 100px.
    'width': 300   // Morphs the width from the current to 300px.
});

注意事项:

此功能仅试用于简单的css选择器,如果单个类选择器,单个id选择器。

Fx.Morph Method: set

设置元素的CSS属性,并立刻应用到元素上。

语法:

myFx.set(to);

参数:

properties - (mixed) 包含css属性的对象,或一个css选择器. 如果css样式只有一个值,则开始值从当前值计算.

(object) 当前Fx.Morph实例。

示例:

var myFx = new Fx.Morph('myElement').set({
    'height': 200,
    'width': 200,
    'background-color': '#f00',
    'opacity': 0
});
var myFx = new Fx.Morph('myElement').set('.myClass');

Fx.Morph Method: start

串连执行任意数量上的css属性。

语法:

myFx.start(properties);

参数:

properties - (mixed) 包含css属性的对象,或一个css选择器. 如果css样式只有一个值,则开始值从当前值计算.

(object) 当前Fx.Morph实例。

示例:

var myEffects = new Fx.Morph('myElement', {duration: 1000, transition: Fx.Transitions.Sine.easeOut});
 
myEffects.start({
    'height': [10, 100],
    'width': [900, 300],
    'opacity': 0,
    'background-color': '#00f'
});

Object: Element.Properties

见Element.Properties

Element Property: morph

Setter

为元素设置一个默认Fx.Morph实例.

语法:

el.set('morph'[, options]);

参数:

options - (object, optional) Fx.Morph选项。

(element) 当前元素。

示例:

el.set('morph', {duration: 'long', transition: 'bounce:out'});
el.morph({height: 100, width: 100});

Getter

获取元素的默认Fx.Morph实例。

语法:

el.get('morph');

参数:

property - (string) Fx.Morph属性参数。

(object)Fx.Morph实例。

示例:

el.set('morph', {duration: 'long', transition: 'bounce:out'});
el.morph({height: 100, width: 100});
el.get('morph'); // the Fx.Morph instance.

Type: Element

Element Method: morph

用元素的morph方法设置动画.

语法:

myElement.morph(properties);

参数:

properties - (mixed) 包含css属性的对象,或一个css选择器. 如果css样式只有一个值,则开始值从当前值计算.

(element)这个元素。

例如:

用一个对象:

$('myElement').morph({height: 100, width: 200});

用一个选择器:

$('myElement').morph('.class1');