我的问题:
>我的动画没有响应.当在较小的屏幕上使用时,图像和文本移动并变得太大.
>我的.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和#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%);
}
渲染速度更快,我认为更容易维护(您不必担心最终位置).
好的,还有你原来的问题:我不知道页面应该如何在响应式视图中表现,我只能建议你一次从一个元素开始,以避免被淹没.稳定地减少视口直到它开始看起来很难看,然后对该元素进行调整.冲洗并重复,直到看起来完美.
如果您可以发挥一个小提琴来展示响应问题,我非常愿意参与并帮助调试/提供想法.所以让我知道.希望其中一些是有用的!