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

【问题标题】：How to make my app does't hang during the animation?如何让我的应用在动画期间不挂起？
【发布时间】：2017-07-15 16:13:23
【问题描述】：

我制作了一个混合应用程序。一页包含三个动画（在 css 中）图片。他们只需要滑入。一切正常，因为我希望它工作，但问题是这些照片每次都挂起（我认为因为它们的质量非常好）并且实际上在结束前 0.5 秒运行，所以我们错过了整个动画。是否有任何科尔多瓦插件或其他东西可以加载我的图片并仅在它们准备好时才开始动画？我使用 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;
  }
}

【问题讨论】：

.animated 和 .my_animation 是做什么的？
这会将名为“my_animation”的动画添加到我的对象中。
不，我的意思是这些类有什么作用——这些类对元素应用了哪些动画代码？
只是 jquery 。我在互联网上看过一次，效果很好。我希望我理解你的问题是正确的。

标签： jquery html css cordova animation

【解决方案1】：

也许您可以全部加载，然后更改zIndex 以显示下一张图片：

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

【讨论】：

但是在这个页面上我实际上只有这三张图片（你可以点击）和背景。没有别的了。