如何在mootools中同时执行多个动画？

I have two divs (say, divs with ids: div1 and div2) whose height I need to expand using Fx.Tween And I want the animations to be simultaneous.

我有两个div(例如,带有id的div:div1和div2),我需要使用Fx.Tween扩展其高度我希望动画是同时的。

'#div1' 's style.height is to be changed from auto to 0. '#div2' 's style.height is to be changed for current height to a new height calculated by a function called calculateHeight()

'#div1'的style.height将从auto更改为0.'#div2'的style.height将当前高度更改为由名为calculateHeight()的函数计算的新高度

how do I do that?

我怎么做?

2 个解决方案

#1

Mootools animations aren't blocking (animations in JS very rarely are!) so simply executing the two tweens sequentially will have the desired affect (as close as a human can perceive)

Mootools动画没有阻塞(JS中的动画非常少!)因此,简单地按顺序执行两个补间将产生所需的效果(尽可能接近人类可以感知)

function go()
{
    $('div1').tween('height', 0);
    $('div2').tween('height', calculateHeight());
}

function calculateHeight()
{
    return 0; //or whatever
}

#2

I think this has to do with the wait:false option. I'm not a programmer and mootools is easy but not as much to be so good at it but I remember reading some docs where it says you can control wether the second animation works as soon as the first one ends or simultaneously.

我认为这与wait:false选项有关。我不是一个程序员,而且mootools很容易,但不是那么擅长它但是我记得读过一些文档,它说你可以控制第二个动画在第一个动画结束或同时结束时。

Chain Method: wait Injects pauses between chained events. Syntax

链方法:等待在链接事件之间注入暂停。句法

myClass.wait(duration);

Arguments 1. duration - (integer) The duration (in milliseconds) to pause the chain stack; defaults to 500.

参数1. duration - (整数)暂停链堆栈的持续时间(以毫秒为单位);默认为500。

I think you should CHAIN the morphing and make it wait(0). But I'm not sure. Hope this helps.

我认为你应该对变形进行CHAIN并让它等待(0)。但我不确定。希望这可以帮助。

#1