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

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

WBOY

Release： 2016-05-16 18:46:25

Original

1105 people have browsed it

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

< ;div class="myElementClass">Element 0

Element 1