【快应用】如何避免图片切换时动画异常
【关键词】
动画样式、透明度、image、stack
【问题背景】
快应用中想在图片切换时加入一些动画效果,使用stack组件下使用两个image组件堆叠,一个image组件通过动画样式设置透明度从1-0隐藏起来,另一张显示出来,从而来实现图片切换效果,但是,前一张图片会概率性地闪现,然后消失。问题代码如下:
【问题分析】
上述代码用两个image组件实现了图片切换时淡入淡出的动画效果,主要是通过透明度实现的。第二个image的css中设置了透明度,但是imgcomplete()方法中又对该image组件做了透明度动画,透明度值从1到0,同时代码中又将css中绑定的透明度变量preop设置为1。
当动画方法完成时间早于css实现的时间,就会出现这个情况。
【解决方案】
1、 将template中第二个image组件的style="{{'opacity:' + preop + ';'}}"去掉。
2、 改为通过动画样式来调用,从0-1变化。