Question

目前这导致（图像）淡出功能结束，然后淡入淡出功能。我需要图像交叉渐变和每个图像的不透明度重叠。我无法完成这项工作。想法？

_initFade: function () {
  this._timer = Y.later(this._intervalDuration, this, this._startPeriod, [], false);

},

_startPeriod: function () {
  this._timer = Y.later(this._intervalDuration, this, this._fadeOut, [], true);
  this._fadeOut();
},

_fadeOut: function(){
  var host = this.get('host');
  this._animOut.set('node', host._getCurrentBlock());
    this._animOut.once('end', this._fadeIn, this);
  this._animOut.run();      
},

_fadeIn: function(){
  var host = this.get('host'),
      blocks = host.get('blocks'),
      index = host.get('index');
      index = host._moveIndex(host._getNextIndex());

  var nextBlock = blocks.item(index);
  this._transparent(nextBlock);
  host.syncUI();
  this._animIn.set('node', nextBlock);
  this._animIn.run();
},

Answer 1

YUI不支持同步运行的多个动画。但是看看Y.Anim的'tween'事件。为动画的每一帧调用它。因此，您可以使用动画淡化一个图像，并在补间事件期间调整第二个图像的不透明度。

例如，我使用补间事件同时为多个项目制作动画：

var someNode = Y.Node.create("<div></div>"); // invisible div to animate
Y.one(document.body).appendChild(someNode);
var anim = new Y.Anim({
    node: someNode,
    duration: 0.25,
    from: { color: 'red' },
    to: { color: 'white' } 
});
anim.on('tween', function(event){
    Y.StyleSheet().set('input.text.error', { backgroundColor: someNode.getStyle('color') });
    // other animations
});

同时调用js函数yui

1 个答案: