The Mootools1.2 tutorial simultaneously carries out multiple deformation animations _ Mootools

Today, let's take a look at the Fx. Elements plug-in, which is based on Fx. Morph. Unlike a single element, Fx. Elements allows you to add animations to multiple Elements at a time. This is useful when you add deformation animations with the same options to multiple elements. Just like the last example we saw in the 20th lecture.
Basic usage
The method using Fx. Elements looks similar to Fx. Morph. The difference between the two lies in the. start ({}) method and. set ({}) method.
To keep things simple, let's first create an array of Elements to pass to Fx. Elements.
Reference code: [] [Save Code]
Var fxElementsArray =$ ('. myelementclass ');
Now we can pass our array to the Fx. Elements object.
Reference code:

The Code is as follows:

Var fxElementsObject = new Fx. Elements (fxElementsArray ,{
// Fx Options
Link: 'chain ',
Duration: 1000,
Transition: 'sine: in: out ',
// Fx event
OnStart: function (){
StartInd. highlight ('# C3E608 ');
}
});

Like Fx. Morph, Fx. Elements extends the Fx class, allowing you to use all the options and events of Fx.
. Start ({}) and. set ({}) Methods
To start a Fx. elements effect, or use Fx. elements, you can set styles like using Fx. tween and Fx. morph does that, but it does not apply the settings directly to Fx. on the Elements object, the corresponding element is referenced through the index-the first element is 0, the second is 1, and so on.
Reference code:

The Code is as follows:

// You can use. set ({...}) to set the style.
FxElementsObject. set ({
'0 ':{
'Height': 10,
'Width': 10,
'Background-color': '#333'
},
'1 ':{
'Width': 10,
'Border': '1px dashed #333'
}
});
// Or use. start ({...}) to create a gradient animation.
FxElementsObject. start ({
'0 ':{
'Height': [50,200],
'Width': 50,
'Background-color': '#87AEE1'
},
'1 ':{
'Width': [2, 100,200],
'Border': '5px dashed #333'
}
});

Like Fx. morph, you can set any start value and end value for the gradient animation of the element, or you can set only one parameter (just as we have set only one value for the width above ), this element changes from the current value to the value specified by the new parameter.
This is all about Fx. Elements. Let's take a look at the following examples to see how they are used.
Sample Code
Here we use Fx. Elements for the two Elements. There are several different types of gradient animations to choose from, and the pause button allows you to pause the animation.
First, let's create our elements. We may inform the button (including the reset button, pause button, and resume button), and there are some indicators, so that we can understand the process.
Reference code:

The Code is as follows:

OnStart

OnCancel

OnComplete

OnChainComplete

Start
Start B
Reset
Pause
Resume

Element 0

Element 1

Our CSS code is also very simple
Reference code:

The Code is as follows:

. Ind {
Width: 200px;
Padding: 10px;
Background-color: #87AEE1;
Font-weight: bold;
Border-bottom: 1px solid white;
}
. MyElementClass {
Height: 50px;
Width: 100px;
Background-color: # FFFFCC;
Border: 1px solid # FFFFCC;
Padding: 20px;
}
# Buttons {
Margin: 20px 0;
Display: block;
}

The following is the MooTools code.
Reference code:

The Code is as follows:

Var startFXElement = function (){
This. start ({
'0 ':{
'Height': [50,200],
'Width': 50,
'Background-color': '#87AEE1'
},
'1 ':{
'Width': [2, 100,200],
'Border': '5px dashed #333'
}
});
}
Var startFXElementB = function (){
This. start ({
'0 ':{
'Width': 500,
'Background-color': '#333'
},
'1 ':{
'Width': 500,
'Border': '10px solid # DC1E6D'
}
});
}
Var setFXElement = function (){
This. set ({
'0 ':{
'Height': 50,
'Background-color': '# ffffcc ',
'Width': 100
},
'1 ':{
'Height': 50,
'Width': 100,
'Border': 'none'
}
});
}
Window. addEvent ('domainready', function (){
Var fxElementsArray =$ ('. myelementclass ');
Var startInd = $ ('start _ ind ');
Var cancelInd = $ ('cel _ ind ');
Var completeInd = $ ('complete _ ind ');
Var chainCompleteInd = $ ('chain _ complete_ind ');
Var fxElementsObject = new Fx. Elements (fxElementsArray ,{
// Fx Options
Link: 'chain ',
Duration: 1000,
Transition: 'sine: in: out ',
// Fx Events
OnStart: function (){
StartInd. highlight ('# C3E608 ');
},
OnCancel: function (){
CancelInd. highlight ('# C3E608 ');
},
OnComplete: function (){
CompleteInd. highlight ('# C3E608 ');
},
OnChainComplete: function (){
ChainCompleteInd. highlight ('# C3E608 ');
}
});
$ ('Fxstart'). addEvent ('click', startFXElement. bind (fxElementsObject ));
$ ('Fxstartb'). addEvent ('click', startFXElementB. bind (fxElementsObject ));
$ ('Fxset'). addEvent ('click', setFXElement. bind (fxElementsObject ));
$ ('Fxpause'). addEvent ('click', function (){
FxElementsObject. pause ();
});
$ ('Fxresume '). addEvent ('click', function (){
FxElementsObject. resume ();
});
});

Learn more

As you can see, Fx. Elements is very simple. To learn more deeply, read the Fx. Elements documents, Fx. Morph documents, and Fx documents carefully.

Also, make sure you have read our tutorials on Fx. Morph and Fx Options and events.

Download the code of the last example

It also contains everything you need to start practicing.