如何解决在ViewPort中制作CSS动画
如果我在所有情况下都将类测试更改为FadeInUp,则它说在向上滚动时测试视口中的动画停止工作。即时消息类的更改除了更改名称之外,应该没有其他作用???
我在做什么错,当将所有测试实例更改为FadeInUp时,为什么在查看端口中div停止工作??
$(document).ready(function() {
var $animationElements = $('.animation-element');
var $window = $(window);
// ps: Let's FIRST disable triggering on small devices!
var isMobile = window.matchMedia("only screen and (max-width: 768px)");
if (isMobile.matches) {
$animationElements.removeClass('animation-element');
}
function checkIfInView() {
var windowHeight = $window.height();
var windowTopPosition = $window.scrollTop();
var windowBottomPosition = (windowTopPosition + windowHeight);
$.each($animationElements,function () {
var $element = $(this);
var elementHeight = $element.outerHeight();
var elementTopPosition = $element.offset().top;
var elementBottomPosition = (elementTopPosition + elementHeight);
//check to see if this current container is within viewport
if ((elementBottomPosition >= windowTopPosition) &&
(elementTopPosition <= windowBottomPosition)) {
$element.addClass('in-view');
} else {
$element.removeClass('in-view');
}
});
}
$window.on('scroll resize',checkIfInView);
$window.trigger('scroll');
/* @end viewport trigger script */
});
/** ----//
* @group standaard animaties
* @author @david
*/
/* Trigger */
.animated {
animation-duration: 1s;
animation-fill-mode: both;
}
/* Optional Delays,change values here */
.one { animation-delay: 0.2s; }
.two { animation-delay: .6s; }
.three { animation-delay: 1s; }
.four { animation-delay: 1.4s; }
/* Animations start here */
/* FADE IN UP BIG */
@keyframes FadeInUp {
from { opacity: 0; transform: translate3d(0,100px,0); }
to { opacity: 1; transform: none; } }
.FadeInUp { animation-name: FadeInUp; }
/* FADE IN LEFT BIG */
@keyframes FadeInLeft {
from { opacity: 0; transform: translate3d(-100px,0); }
to { opacity: 1; transform: none; } }
.FadeInLeft { animation-name: FadeInLeft; }
@keyframes FadeInRight {
from { opacity: 0; transform: translate3d(500px,0); }
to { opacity: 1; transform: none; } }
.FadeInRight { animation-name: FadeInRight; }
/* @end standaard animaties */
body {
overflow-x:hidden; /* hides scrollbar but does it cause other issues????*/
}
.callout {border: 1px solid green;
padding:10px;
margin:0 auto;
text-align: center;
display:table;
}
.test.in-view {
animation: FadeInUp;
animation-duration: 3s;
animation-delay: 0s;
animation-fill-mode: both;
backface-visibility: hidden;
}
.FadeInUp.in-view {
animation: FadeInUp;
animation-duration: 3s;
animation-delay: 0s;
animation-fill-mode: both;
backface-visibility: hidden;
}
.test2.in-view {
animation: FadeInLeft;
animation-duration: 3s;
animation-delay: 0s;
animation-fill-mode: both;
backface-visibility: hidden;
}
.test3.in-view {
animation: FadeInRight;
animation-duration: 3s;
animation-delay: 0s;
animation-fill-mode: both;
backface-visibility: hidden;
}
/* if it was SASS you could use:
.test2.in-view {
@extend .fadeInUpBig;
}
*/
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
</script>
<style>
</style>
</head>
<body>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<div class="callout test animation-element">fade in from bottom</div>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<div class="callout animation-element test2">fade in left</div>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<div class="callout animation-element test3">fade in right</div>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<div class="callout test animation-element">fade in bottom</div>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<div class="callout animation-element test2">fade in left</div>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<div class="callout animation-element test3">fade in right</div>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<div class="callout test animation-element">fade in from bottom</div>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<div class="callout animation-element test2">fade in left</div>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<div class="callout animation-element test3">fade in right</div>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</body>
</html>
解决方法
尝试修改:
if (isMobile.matches) {
$animationElements.removeClass('animation-element');
}
附带:
if (isMobile.matches) {
$(animationElements).removeClass('animation-element');
}
,
对所有类使用小写字母可解决问题。它试图运行带有大写字母而不是包含动画的类的关键帧动画。
.fadeInup.in-view {
animation: FadeInUp;
animation-duration: 3s;
animation-delay: 0s;
animation-fill-mode: both;
backface-visibility: hidden;
}
<div class="callout fadeInup animation-element">fade in from bottom</div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。