📌  相关文章
📜  MooTools-Fx.Element

📅  最后修改于: 2020-10-22 06:39:32             🧑  作者: Mango

Fx.Element允许您将Fx功能添加到单个页面上的多个dom元素。实际上Fx.Element是Fx.Morph插件的扩展。 Fx.Element和Fx.Morph之间的唯一区别是语法。在这种语法中， start（{}）方法用于创建效果，而.set（{}）方法用于设置某些样式。

看一下Fx.Element的以下语法。

句法

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

start（{}）和set（{}）

开始和设置关键字结构用于开始和设置样式。但是在此结构中，您通过索引引用了该元素-第一个元素为0，第二个元素为1，依此类推。看一下Start和Set结构的以下语法。

句法

//you can set your styles with .set({...})
fxElementsObject .set({
   '0': {
      'height': 10,
      'width': 10,
      'background-color': '#333'
   },
   '1': {
      'width': 10,
      'border': '1px dashed #333'
   }
});

//or create a transition effect with .start({...})
fxElementsObject .start({
   '0': {
      'height': [50, 200],
      'width': 50,
      'background-color': '#87AEE1'
   },
   '1': {
      'width': [100, 200],
      'border': '5px dashed #333'
   }
});

例

让我们以说明Fx.Element的示例为例。看一下下面的代码。


      
      
      
      
      
   
   
   
      
onStart

      
onCancel

      
onComplete

      
onChainComplete

      
      
         
         
         
         
         
      
      
      
Element 0

      
Element 1

您将收到以下输出-

输出