时间戳

首页 > 解决方案 > Ionic 3 动画生成器

ionic3 - Ionic 3 动画生成器

问题描述

我有一个不断更新的数组，对于我想要为其设置动画的每个新条目。所以我写了这个函数：

animateUserInput() {
    let userMsgLength = document.getElementsByClassName('usermessage').length;
    let lastElement;
    setTimeout(() => {
        lastElement = document.getElementsByClassName('usermessage')[userMsgLength];
        if(lastElement){
            const myAnimation = this.builder.build([
                sequence([
                    animate('200ms 500ms ease-out', style({
                        opacity: 0,
                        top:'-120px'
                    })), animate('0ms 101ms',style({
                        fontSize: 16,
                        textAlign: 'right',
                        top: '-100px'
                    })),
                    animate('0ms 100ms ease-in',style({
                        opacity: 1,
                        top:'-130px'
                    }))
                ])

            ]);

            // then create a player from it
            const player = myAnimation.create(lastElement);

            player.play();
        }

    }, 0)

}

如果我用 Ionic serve 编译它，它会工作得很好。但如果我在我的设备（iPhone）上构建它，动画将不起作用。我已经尝试了几个小时，不知道该怎么办了。有什么建议么？

标签： ionic3angular-animations

解决方案

您可能需要用于 safari 的polyfill，目前我认为它不支持网络动画 api。

推荐阅读