Mootools 1.2 tutorial: perform multiple deformation animations at the same time_Mootools

This is useful when you animate multiple elements with the same transformation options. Just like the last example we saw in Lecture 20.
Basic usage
The method of using Fx.Elements looks similar to Fx.Morph. The difference between the two is the .start({}) method and the .set({}) method.
To keep things simple, let's first create an array of elements to pass to Fx.Elements.
Reference code: [Copy code] [Save code]
var fxElementsArray = $$('.myElementClass');
Now we can pass our array to the Fx.Elements object.
Reference code:

Copy code The code is as follows:

var fxElementsObject = new Fx. Elements(fxElementsArray, {
// Fx options
link: 'chain',
duration: 1000,
transition: 'sine:in:out',
// Fx events
onStart: function(){
startInd.highlight('#C3E608');
}
});

Like Fx.Morph, Fx.Elements extends The Fx class allows you to use all the options and events of Fx.
.start({}) and .set({}) methods
To start an Fx.Elements effect, or set a style using Fx.Elements, you can do the same as you would with Fx.Tween and Fx.Morph, But instead of applying the settings directly to the Fx.Elements object, the corresponding elements are referenced by index - the first element is 0, the second is 1, and so on.
Reference code:

Copy 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': [100, 200],
' border': '5px dashed #333'
}
});

Just like Fx.Morph, you can set any start value and end value for the gradient animation of the element , you can also set only one parameter (just like we only set a value for the width above), then the element will change from the current value to the value specified by the new parameter.
That’s all about Fx.Elements. Take a look at the examples below to see how they are used.
Example code
Here we use Fx.Elements for two elements. There are several different types of gradient animations to choose from, and a pause button allows you to pause the animation.
First, let’s create our elements, our possible notification buttons (including a reset button, a pause button, and a resume button), and some indicators to help us understand This process.
Reference code:

Copy code The code is as follows:

onStart

onCancel

onComplete

onChainComplete

< ;button id="fxstart">Start A
Start B
Reset button>
Pause
Resume

< ;div class="myElementClass">Element 0

Element 1

Our CSS code is also very simple
Reference code:

Copy 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;
}

Below is the MooTools code.
Reference code:

Copy code The code is as follows:

var startFXElement = function(){
this.start({
'0': {
'height': [50, 200],
'width': 50,
'background-color': '#87AEE1'
},
'1': {
'width': [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('domready', function() {
var fxElementsArray = $$('.myElementClass');
var startInd = $(' start_ind');
var cancelInd = $('cancel_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, you can carefully read the Fx.Elements documentation, Fx.Morph documentation and Fx Documentation.

Also, make sure to read our tutorial on Fx.Morph and Fx Options and Events.

Download the code for the last example

Also included is everything you need to get started.