保持CSS和jQuery动画的响应

2019年7月21日 151次阅读

我的问题：

>我的动画没有响应.当在较小的屏幕上使用时,图像和文本移动并变得太大.
>我的.moveup类不会动画.我已经尝试将CS​​S转换放在我认为属于它的任何地方,但是当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和#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)
});

最佳答案 既然你还在等待回复,我会告诉你我对这种情况的看法.我按照添加的链接进行了操作,但是我不认为我在该页面上看到了您正在引用的欢迎动画的示例(可能它现在被禁用了,因为我看到了一些标记).因此,提供更详细的答案仍然有点困难.

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

#ani_plus {
  bottom: 0;
}

这样,转换就知道从初始值到动画的起源.关于上面的注释,使用transform属性为元素设置动画是一种更好的做法,并将其保留在最终位置.理想情况下,这样的事情：

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

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

渲染速度更快,我认为更容易维护(您不必担心最终位置).

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

如果您可以发挥一个小提琴来展示响应问题,我非常愿意参与并帮助调试/提供想法.所以让我知道.希望其中一些是有用的！

点赞