MooTools1.4 source code analysis-Fx. Morph

Mootools1.4-Fx. Morph class source code analysis, if you understand the error, please correct:
 
/*
---
 
Name: Fx. Morph
 
Description: Formerly Fx. Styles, effect to transition any number of CSS properties for an element using an object of rules, or CSS based selector rules.
 
License: MIT-style license.
 
Requires: Fx. CSS
 
Provides: Fx. Morph
 
Source code analysis: bitter Bitter Gourd (http://hmking.blog.51cto.com)
 
...
*/
 
// # Region-Fx. Morph-
 
/**
* @ Fx. Morph: Provides the function of performing an animated special effect transformation on multiple CSS attributes at a time. Therefore, the attributes of this class are multi-value sets.
**/
Fx. Morph = new Class ({
 
// Inherit from Fx. CSS
Extends: Fx. CSS,
 
/**
* @ Method: initialize
* @ Param element-(mixed) element id or reference
* @ Param options-(object, optional) options provided in the Fx class
* @ Description: constructor that converts the CSS attribute values of multiple elements from one value to another.
**/
Initialize: function (element, options ){
// The element property stores the element object to which the special effect applies.
This. element = this. subject = document. id (element );
// Call the method with the same name as the parent class
This. parent (options );
},
 
/**
* @ Method: set
* @ Param now-(mixed) can be an object containing a CSS property key-value pair, or a CSS selector (must be defined on the page ). if only one value is given for the CSS attribute, the current attribute value of the element is used as the starting value during the conversion.
*{
* 'Height': 200,
* 'Width': 200,
* 'Background-color': '# f00 ',
* 'Opacity ': 0
*}
* @ Returns: (object) specifies the Fx. Morph instance.
* @ Description: Set the specified CSS attribute value of the element to the specified value immediately.
**/
Set: function (now ){
// If the parameter is of the string type, it is represented as a CSS selector. You can find the specified rule from the style rules on the page.
If (typeof now = 'string '){
Now = this. search (now );
}
// Set each style value separately
For (var p in now ){
This. render (this. element, p, now [p], this. options. unit );
}
Return this;
},
 
/**
* @ Method: compute
* @ Param from-(object) refers to the object of the start value of each style attribute.
* @ Param to-(object) refers to the object of the end value of each style attribute explained
* @ Param delta-(mixed) proportional factor required for special effect changes
* @ Returns: (array) an array containing the calculated current value of each style attribute
* @ Description: Calculate the current value of each style Attribute Based on the initial value of each style attribute, the ending value, and the special effect proportional factor.
**/
Compute: function (from, to, delta ){
Var now = {};
For (var p in from ){
// Call the same name calculation method of the Fx. CSS class for each style attribute
Now [p] = this. parent (from [p], to [p], delta );
}
Return now;
},
 
/**
* @ Method: start
* @ Param roperties-(mixed) can be an object that contains a CSS property key-value pair or a CSS selector (must be defined on the page ). if only one value is given for the CSS attribute, the current attribute value of the element is used as the starting value during the conversion.
*{
* 'Height': [10,100],
* 'Width': [900,300],
* 'Opacity ': 0,
* 'Background-color': '# 00f'
*}
* @ Returns: (object)-master Fx. Morph instance
* @ Description: concatenates multiple CSS attribute transformations (and triggers the 'start' event)
* @ Notes:
* If a CSS selector is input, the selector must have a matched style on the page.
* Multiple selectors are not supported (multiple selectors separated by commas)
* @ Import 'ed CSS rules will not be available for Morph CILS. All CSS selectors must be present in CSS directly loaded into the page.
**/
Start: function (properties ){
// Check the running status of the current special effect to determine whether to run the new special effect.
If (! This. check (properties) {return this ;}
// If the type of the properties parameter is string, it indicates that the specified CSS selector name is provided. You need to find the attributes from the style rules on the current page.
If (typeof properties = 'string '){
Properties = this. search (properties );
}
Var from = {},
To = {};
// Calculate the interpreted value for each CSS attribute value. At this time, each key value of the from and to objects is an array.
For (var p in properties ){
Var parsed = this. prepare (this. element, p, properties [p]);
From [p] = parsed. from;
To [p] = parsed.;
}
// Call the constructor of the Fx class
Return this. parent (from, );
}
 
});
 
// # Endregion
 
// # Region-Element. Properties. morph-
 
/**
* @ Element property: morph
* @ Description: Used to set or obtain the Fx. Morph instance on the element to implement the single-piece mode.
**/
Element. Properties. morph = {
 
// Setter sets Fx. Morph object parameters
Set: function (options ){
// Obtain the Fx. Morph instance on the element and then execute the cancel Method to cancel the execution of the special effect, and then set the optional parameter
This. get ('morph'). cancel (). setOptions (options );
Return this;
},
 
// Getter obtains the Fx. Morph object
Get: function (){
// Read from the temporary object first, and check whether it is cached in the Fx. Morph instance.
Var morph = this. retrieve ('morph ');
If (! Morph ){
// If no cache exists, a new Fx. Morph instance is saved.
Morph = new Fx. Morph (this, {link: 'cancel '});
This. store ('morph', morph );
}
Return morph;
}
 
};
 
// # Endregion
 
// # Region-Element Method-
 
// Element calls the Fx. Morph shortcut
Element. implement ({
 
/**
* @ Element method: morph
* @ Param properties-(mixed) can be an object containing a CSS property key-value pair, or a CSS selector (must be defined on the page ). if only one value is given for the CSS attribute, the current attribute value of the element is used as the starting value during the conversion.
* @ Returns: (element) returns the primary element.
* @ Description: executes the animation effect transformation of the specified attribute value on the element.
**/
Morph: function (props ){
// This is to use the above getter to take the Fx. Morph instance, and then start, props can be multiple style attribute arrays or CSS Selector
This. get ('morph'). start (props );
Return this;
}
 
});
 
// # Endregion
 
Author: Bitter Melon"