Question

我做了一个混合应用程序。一页包含三个动画（css）图片。他们只需要滑入。一切正常，因为我希望它工作但问题是这些照片每次都挂起（我认为因为它们具有相当好的质量）并且在结束之前实际上像0.5s一样运行所以我们错过了整个动画。是否有任何cordova插件或某些内容可以加载我的图片并仅在它们准备好后启动动画？我使用jquery为每张图片添加动画，因为我不希望它们同时滑动。我是这样做的：

setTimeout( function(){
$('#photo_one').addClass('animated my_animation');
}, 500)
setTimeout( function(){
$('#photo_two').addClass('animated my_animation');
}, 1000)
setTimeout( function(){
$('#photo_three').addClass('animated my_animation');
}, 1500)

编辑我的动画：

 .my_animation{
  -webkit-animation-name: my_animation;
  animation-name: my_animation;
  opacity: 1!important;
}

@keyframes my_animation{
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  from {
    opacity: 0;
    -webkit-transform: translate3d(3000px, 0, 0);
    transform: translate3d(3000px, 0, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(-25px, 0, 0);
    transform: translate3d(-25px, 0, 0);
  }

  75% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }

  90% {
    -webkit-transform: translate3d(-5px, 0, 0);
    transform: translate3d(-5px, 0, 0);
  }

  to {
    -webkit-transform: none;
    transform: none;
  }
}

Answer 1

也许你可以加载所有内容，然后更改zIndex以提出下一张图片：

document.getElementById("img1").style.zIndex = "1";

如何让我的应用程序在动画期间不挂起？

1 个答案: