Javascript 淡入内容，然后设置动画（flipInX）
加载“我的页面”时，将显示视口中的内容（不在视图中的内容在容器上获得一个Javascript 淡入内容，然后设置动画（flipInX）,javascript,jquery,css,animation,Javascript,Jquery,Css,Animation,加载“我的页面”时，将显示视口中的内容（不在视图中的内容在容器上获得一个隐藏的类），并执行动画（flipInX）。然后，当用户向下滚动页面时，hidden类将从容器中移除，内容淡入淡出（使用fadeIn（））到页面上，然后进行动画制作 我的问题是它在页面上淡入淡出（fadeIn（）），制作动画，然后再次执行fadeIn（） 编辑：我在一些浏览器（Firefox和Chrome）上发现，它在最后会有一个额外的“反弹”，而不是在第二次时褪色（Safari） HTML JS 函数是crolledint
隐藏的类），并执行动画（flipInX
）。然后，当用户向下滚动页面时，hidden
类将从容器中移除，内容淡入淡出（使用fadeIn（）
）到页面上，然后进行动画制作
我的问题是它在页面上淡入淡出（fadeIn（）
），制作动画，然后再次执行fadeIn（）
编辑：我在一些浏览器（Firefox和Chrome）上发现，它在最后会有一个额外的“反弹”，而不是在第二次时褪色（Safari）
HTML
JS
函数是crolledintoview（elem）{
var docViewTop=$（window.scrollTop（）；
var docViewBottom=docViewTop+$（window）.height（）；
var elemTop=$（elem）.offset（）.top；
var elemBottom=elemTop+$（elem）.height（）；
返回（（elemBottom=docViewTop））；
}
$（文档）.ready（函数（）{
$（'.post'）。每个（函数（索引）{
var-delay=$（this.attr（'data-delay'）；
if（typeof delay！==typeof undefined&&delay！==false）{
$（this.css（'animation'、'flipinx2s'.+delay+'s'）；
$（this.css（'-webkit animation'，flipInX 2s.+delay+'s'）；
}
});
$（'.post'）。不是（'.post:first'）。每个（函数（）{
如果（！isScrolledIntoView（$（此）））{
$（this.addClass（'hidden'）；
}
});
$（文档）.on（'scroll'，function（）{
$（'.post.hidden'）。每个（函数（）{
如果（isScrolledIntoView（$（此）））{
$（this.removeClass（'hidden'）.css({
“显示”：“无”
}).fadeIn（）；
}
});
});
});
flipInX的动画也会对0%到60%之间的元素的不透明度设置动画。尝试删除动画中对opacity
的引用。只使用关键帧动画而不依赖jQuery的fadeIn
可以更好地实现您描述的视觉效果（淡入，然后设置动画）
我改变了很多东西，制作了一个非常自然的动画。尽管这可能不是您所期望的，但您可以将其作为基础，以更接近您想要的结果（同时使用更少的代码）
这就是我改进/改变的地方：
- 将检测可见元素的功能替换为更多
可靠的方法。（参考资料见下文）
- 使用css
animation state
属性和一点javascript来控制每个动画的初始状态和播放
- 延迟现在分配给每个卷轴上以前隐藏的元素
- 对于淡入第一部分，利用了
flipInX
中的现有关键帧。在那里，您可以调整不透明度
值以获得更好的结果
- 将一些动画参数从javascript移到CSS。（例如
动画持续时间
）
- flipInX动画结束时，元素将通过使用
动画填充模式：forwards
停留在最后一帧上
咨询来源：
您可以在这把小提琴中看到结果：
带注释的新代码（更新）：
$（函数（）{
/**检测可见元素的推荐技术
取走https://stackoverflow.com/a/7557433/4405615
删除了宽度检测，因为我们只需要高度*/
函数为CrolledinToView（el）{
//为使用jQuery的用户提供特别奖励
if（jQuery的类型==“函数”&&el实例jQuery）{
el=el[0]；
}
var rect=el.getBoundingClientRect（）；
返回(
rect.top>=0&&
rect.bottom尝试将.one（）
替换为.on（）
@guest271314将.on（）
替换为。one（）
使滚动到视图中的内容不会加载。哇，回答不错！除了加载页面时视图中的元素没有延迟之外，似乎效果不错（在Safari上）。我还为最初可见的项目添加了延迟。除此之外，Safari支持的一些-webkit-
前缀丢失，因此我添加了它们。请查看我更新的anwser和fiddle。希望它现在工作得更好。
<body class="homepage">
<main id="main" class="main" role="main" tabindex="-1">
<div class="main-3">
<article class="post flipInX animated" data-delay="2">
<h1 class="h-1">Service 1</h1>
<div class="entry">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vestibulum, lectus id sollicitudin mattis, quam tortor lobortis orci, sed iaculis mi nulla non ipsum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec non felis mollis, congue neque eu, rhoncus libero. Nunc ut mattis ante.</div>
</article>
<article class="post flipInX animated" data-delay="4">
<h1 class="h-1">Service 2</h1>
<div class="entry">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vestibulum, lectus id sollicitudin mattis, quam tortor lobortis orci, sed iaculis mi nulla non ipsum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec non felis mollis, congue neque eu, rhoncus libero. Nunc ut mattis ante.</div>
</article>
<article class="post flipInX animated" data-delay="6">
<h1 class="h-1">Service 3</h1>
<div class="entry">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vestibulum, lectus id sollicitudin mattis, quam tortor lobortis orci, sed iaculis mi nulla non ipsum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec non felis mollis, congue neque eu, rhoncus libero. Nunc ut mattis ante.</div>
</article>
<article class="post flipInX animated" data-delay="8">
<h1 class="h-1">Service 4</h1>
<div class="entry">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vestibulum, lectus id sollicitudin mattis, quam tortor lobortis orci, sed iaculis mi nulla non ipsum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec non felis mollis, congue neque eu, rhoncus libero. Nunc ut mattis ante.</div>
</article>
<article class="post flipInX animated" data-delay="10">
<h1 class="h-1">Service 5</h1>
<div class="entry">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vestibulum, lectus id sollicitudin mattis, quam tortor lobortis orci, sed iaculis mi nulla non ipsum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec non felis mollis, congue neque eu, rhoncus libero. Nunc ut mattis ante.</div>
</article>
<article class="post flipInX animated" data-delay="12">
<h1 class="h-1">Service 6</h1>
<div class="entry">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vestibulum, lectus id sollicitudin mattis, quam tortor lobortis orci, sed iaculis mi nulla non ipsum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec non felis mollis, congue neque eu, rhoncus libero. Nunc ut mattis ante.</div>
</article>
</div>
</main>
</body>
* {
border: 0;
margin: 0;
padding: 0;
-webkit-appearance: none;
-webkit-border-radius: 0;
}
*,
*:before,
*:after {
box-sizing: border-box;
}
.hidden {
visibility: hidden;
}
.main {
position: relative;
display: inline-block;
height: auto;
width: 98%;
margin: 40px auto 0 auto;
text-align: left;
}
.main.minify {
margin-top: 150px;
}
.main-3 {
min-height: 400px;
font-size: 16px;
line-height: 24px;
}
[class|=h] {
margin-bottom: 42px;
font-size: 30px;
font-weight: normal;
line-height: 1;
}
.animated {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both
}
.animated.bounceIn,
.animated.bounceOut,
.animated.flipOutX,
.animated.flipOutY {
-webkit-animation-duration: .75s;
animation-duration: .75s
}
@-webkit-keyframes flipInX {
0% {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
opacity: 0
}
40% {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in
}
60% {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
opacity: 1
}
80% {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
transform: perspective(400px) rotate3d(1, 0, 0, -5deg)
}
100% {
-webkit-transform: perspective(400px);
transform: perspective(400px)
}
}
@keyframes flipInX {
0% {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
opacity: 0
}
40% {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in
}
60% {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
opacity: 1
}
80% {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
transform: perspective(400px) rotate3d(1, 0, 0, -5deg)
}
100% {
-webkit-transform: perspective(400px);
transform: perspective(400px)
}
}
.flipInX {
-webkit-backface-visibility: visible !important;
backface-visibility: visible !important;
-webkit-animation-name: flipInX;
animation-name: flipInX
}
.homepage .main-3 {
width: 80%;
margin: 0 auto;
text-align: center;
}
.homepage .post {
display: inline-block;
width: 49%;
margin-bottom: 40px;
vertical-align: top;
-webkit-text-stroke: 0.5px;
}
.homepage .post .h-1 {
font-size: 26px;
line-height: 110%;
margin: 14px 0 10px;
text-align: center;
}
.homepage .post .entry {
padding: 0 10%
}
function isScrolledIntoView(elem) {
var docViewTop = $(window).scrollTop();
var docViewBottom = docViewTop + $(window).height();
var elemTop = $(elem).offset().top;
var elemBottom = elemTop + $(elem).height();
return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}
$(document).ready(function() {
$('.post').each(function(index) {
var delay = $(this).attr('data-delay');
if (typeof delay !== typeof undefined && delay !== false) {
$(this).css('animation', 'flipInX 2s .' + delay + 's');
$(this).css('-webkit-animation', 'flipInX 2s .' + delay + 's');
}
});
$('.post').not('.post:first').each(function() {
if (!isScrolledIntoView($(this))) {
$(this).addClass('hidden');
}
});
$(document).on('scroll', function() {
$('.post.hidden').each(function() {
if (isScrolledIntoView($(this))) {
$(this).removeClass('hidden').css({
'display': 'none'
}).fadeIn();
}
});
});
});