将 mootools 脚本与 gwt 应用程序结合使用

Question

我的问题是在 Composite 上制作一个动画，该动画在加载数据时启动。 我使用 html 在普通 div 上制作了动画以进行测试：

<div class="LoadDataWidget">
    <div id="arrow" class="greenArrow"></div>
</div>


.LoadDataWidget {
    width: 995px;
    height: 591px;
    background-image: url('images/ladowanie-danych.png');
    background-repeat: no-repeat;
    position: relative;
    margin: 0px auto;
    visibility: hidden;
}

.LoadDataWidget .greenArrow {
    width: 102px;
    height: 141px;
    background-image: url('images/ladowanie-danych-strzalka.png');
    background-position: bottom;
    background-repeat: no-repeat;
    position: absolute;
    left: 500px;
    top: 205px;
}

JavaScript+mootools 动画脚本：

    window.addEvent('domready', function(){

        var effect = new Fx.Tween('arrow', {duration: 800}),periodical;

        // Create the function wich will run the effect
        var fx = function() {
            effect.start('height', '141').chain(function(){
                effect.start('height', '161');
            });
            // return this function, so you could do fx() which returns fx,
            //or fx()()() which still returns fx and runs the function 3 times
            return fx;
        };

        fx().periodical(1700);

        // assing 'singleImage' variable to the image tag with the 'image' ID
        var singleImage = $$('.LoadDataWidget');

        // set a bunch of CSS styles to the aforementioned image
        singleImage.set('styles', {
            'opacity': 0,
            'visibility': 'visible'
        });

        // fade in the image
        singleImage.fade('in');


});

它有效。 这是一个从上到下的箭头动画。

但是，当我尝试在 gwt 应用程序中使用此脚本以及具有类“LoadDataWidget”和 id“arrow”的元素时，它不起作用。

还有我尝试制作动画的 GWT Composit 的 Java 代码：

import com.google.gwt.user.client.ui.SimplePanel;

public class LoadDataWidget extends SimplePanel {

    public LoadDataWidget() {
        setStyleName("LoadDataWidget");
        SimplePanel arrow = new SimplePanel();
        arrow.setStyleName("greenArrow");
        arrow.getElement().setId("arrow");
        setWidget(arrow);
    }
}

Domready 事件有问题吗？您有解决这个问题的任何线索吗？

Answer 1

您的 domready 事件在 html 加载且 DOM 准备就绪之后、GWT 加载并执行之前触发。

尝试在加载 GWT 后通过 JSNI 调用您的函数。