Question

我的问题：

我的动画没有响应。当在较小的屏幕上使用时，图像和文本会移动并变得太大。
我的.moveup类不会动画。我已经尝试将CSS转换放在我认为属于它的任何地方，但是当jQuery在课堂上添加时，两张受影响的图片就会跳转。

背景资料：
我正在建立一个网站，作为这个网站的一部分，之前应该播放一个简短的动画。欢迎滑到一边，用户会看到下面的网站/应用程序。

我正在使用 bootstrap 3 作为我的框架，并使用Animate.css进行这些动画，以及我自己的.moveup。

我在保持动画响应方面遇到了极大的问题，一旦我改变了屏幕尺寸，就会比我可怜的小脑袋更能打破它。

动画：
动画应该向上滑动5个元素，＃ani_text_1 ， #ani_plus ，＃ani_text_2 ， #ani_equals 和＃ani_text_3 ，按此顺序。然后其他3个元素 #ani_mcloud ， #ani_man 和 #ani_check 向下滑动，之后 #ani_plus 和< em> #ani_equals ，在它们之间进一步滑动，最终完成动画。

我的代码：
的 HTML：

<div class="container-fluid">
  <div class="row">
    <div class="welcome">
      <div class="animate col-md-offset-2 col-md-8">
        <div class="row ani_drawing">
          <div class="col-md-4 col-sm-2">
            <img id="ani_mcloud" src="http://s33.postimg.org/5cnmfyam7/manycloud.png" class="wait_animation img-responsive center-block">
          </div>
          <div class="col-md-4 col-sm-2">
            <img id="ani_man" src="http://s33.postimg.org/v6strzl8f/man_indif2.png" class="wait_animation img-responsive center-block">
          </div>
          <div class="col-md-4 col-sm-2">
            <img id="ani_check" src="http://s33.postimg.org/v1p2ibdxb/check.png" class="wait_animation img-responsive center-block">
          </div>
        </div>
        <div class="row ani_text">
          <h4 id="ani_text_1" class="col-md-offset-1 col-md-2 wait_animation">Træk ikon og tekst der<br>passer bedst</h4>
          <div class="col-md-2">
            <img id="ani_plus" src="http://s33.postimg.org/3tnmx8enz/plus.png" class="wait_animation img-responsive center-block">
          </div>
          <h4 id="ani_text_2" class="col-md-2 wait_animation">Flyt det over på<br>ham her</h4>
          <div class="col-md-2">
            <img id="ani_equals" src="http://s33.postimg.org/syenane4f/equals.png" class="wait_animation img-responsive center-block">
          </div>
          <h4 id="ani_text_3" class="col-md-2 wait_animation">Få hjælp til at løse<br>din situation</h4>
        </div>
      </div>
    </div>
  </div>
</div>

CSS：

    .animate {
        padding-top: 8%;
    }
    #ani_mcloud,
    #ani_check {
        padding-top: 30%;
    }
    .moveup {
        position: relative;
        bottom: 130px;
    }
    .welcome {
        position: absolute;
        height: 100vh;
        width: 100vw;
        left: -9px;
        background-color: @white;
        z-index: 1;
        -webkit-transition: all 1.0s ease;
        -moz-transition: all 1.0s ease;
        -o-transition: all 1.0s ease;
        transition: all 1.0s ease;
    }
    .blue {
        background-color: @darkred;
    }
    .wait_animation {
        opacity: 0;
        transition: all 2s ease-in-out;
        -webkit-transition: all 2s ease-in-out;
        /** Chrome & Safari **/
        -moz-transition: all 2s ease-in-out;
        /** Firefox **/
        -o-transition: all 2s ease-in-out;
    }
    .animate img {
        width: 20%;
    }

jQuery的：

$('.wbutton').on('click', function() {
  $(".welcome").toggleClass('blue');
  setTimeout(function() {
    $("#ani_text_1").toggleClass("animation fadeInUp");
  }, 700);
  setTimeout(function() {
    $("#ani_plus").toggleClass("animation fadeInUp");
  }, 900);
  setTimeout(function() {
    $("#ani_text_2").toggleClass("animation fadeInUp");
  }, 1100);
  setTimeout(function() {
    $("#ani_equals").toggleClass("animation fadeInUp");
  }, 1300);
  setTimeout(function() {
    $("#ani_text_3").toggleClass("animation fadeInUp").one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function() {
      setTimeout(function() {
        $("#ani_mcloud").toggleClass("animation fadeInDown");
      }, 500);
      setTimeout(function() {
        $("#ani_cloud").toggleClass("animation fadeInDown");
      }, 700);
      setTimeout(function() {
        $("#ani_plus").toggleClass("moveup");
      }, 900);
      setTimeout(function() {
        $("#ani_man").toggleClass("animation fadeInDown");
      }, 1100);
      setTimeout(function() {
        $("#ani_equals").toggleClass("moveup");
      }, 1300);
      setTimeout(function() {
        $("#ani_check").toggleClass("animation fadeInDown");
      }, 1500);
    });
  }, 1500)
});

Answer 1

由于您仍在等待此处的回复，我们会告诉您我对此情况的看法。我按照添加的链接进行了操作，但是我认为我没有看到您在该页面上引用的欢迎动画的示例（可能它现在被禁用了，正如我所看到的那样一些标记）。因此，提供更详细的答案仍然有点困难。

首先，我将在#ani_plus元素上解决你的.moveup类动画。看起来主要的目标属性是bottom。为了确保动画正常工作，在动画实际影响它之前必须在元素上出现一个起始值（此时该元素似乎缺失了）。所以添加以下内容：

#ani_plus {
  bottom: 0;
}

这样，转换知道从初始值到动画的起源。关于上述内容的注释，使用transform属性为元素设置动画效果更好，并将其保留在最终位置。理想情况下，这样的事情：

#ani_plus {
  transform: translateY(10%);
  transition: transform 2s ease-in-out;
}

.moveup {
  transform: translateY(0%);
}

渲染速度更快，我认为更容易维护（您不必担心最终位置）。

好的，还有你原来的问题：我不知道页面应该如何在响应式视图中表现，我只能建议你一次从一个元素开始，以避免被淹没。稳定地减少视口直到它开始看起来很难看，然后对该元素进行调整。冲洗并重复，直到看起来完美。

如果您可以发挥一个小提示来演示响应问题，我非常愿意参与并帮助调试/提供想法。所以让我知道。希望其中一些对此有帮助！

保持CSS和jQuery动画响应

1 个答案: