1. 首頁
  2. 問答
  3. 淡入內容，然後動畫（flipInX）

淡入內容，然後動畫（flipInX）

2016-02-24 74 views
4

當我的頁面加載時，視口中的內容顯示（內容不在視圖中的容器上的hidden類）並執行動畫（flipInX）。然後，當用戶向下滾動頁面時，hidden類將從容器中移除，並且內容淡入（使用fadeIn()）到頁面上，然後應該執行動畫。淡入內容，然後動畫（flipInX）

我的問題是它正在消失（fadeIn()）到頁面上，做動畫，然後再次做fadeIn()。

編輯：我在某些瀏覽器中（Firefox和Chrome）它，而不是在第二次衰落一個額外的 「反彈」 末，（Safari瀏覽器）

JSFiddle

HTML

<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>

CSS

* { 
    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% 
}

JS

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(); 
     } 
    }); 
    }); 
});

來源

2016-02-24 Draven

+0

嘗試替換'。一（）''爲。對（）' – guest271314

+0

@ guest271314更換'。對（ ）''.one（）'使滾動到視圖內容不加載。 – Draven

回答

3

您描述的視覺結果（淡入，然後動畫）可以通過使用關鍵幀動畫而不依賴於jQuery的fadeIn更好地完成。

我改變了一堆東西，並提出了一個非常自然的動畫。雖然這可能不是你所期望的，但你可以用它作爲接近你想要的結果的基礎（同時使用少一點的代碼）。

這是我改進/改變：

  • 替換檢測用更 可靠的方法可見元素的功能。 （參見下面的參考文獻）
  • 使用CSS animation-state屬性和位的JavaScript來控制每一個動畫現在
  • 延遲被分配給在每個滾動以前隱藏元件的初始狀態和回放。
  • 對於淡入淡出的部分，我利用了flipInX中的現有關鍵幀。在那裏，您可以調整opacity的值以獲得更好的效果
  • 將某些動畫參數從javascript移出到CSS。 （例如animation-duration）
  • 當flipInX動畫結束時，該元素停留在最後一幀，使用animation-fill-mode: forwards。

來源諮詢：

你可以看到在這個小提琴結果：https://jsfiddle.net/wazaraki/czwrgqdq/

與評論新的代碼（更新）：

$(function() { 
 
    /** Reccomended technique for detecting visible elements 
 
     take from https://stackoverflow.com/a/7557433/4405615 
 
     Removed width detection since we only need the heights */ 
 
    function isScrolledIntoView (el) { 
 

 
    //special bonus for those using jQuery 
 
    if (typeof jQuery === "function" && el instanceof jQuery) { 
 
     el = el[0]; 
 
    } 
 

 
    var rect = el.getBoundingClientRect(); 
 

 
    return (
 
     rect.top >= 0 && 
 
     rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) /*or $(window).height() */ 
 
    ); 
 
} 
 
/* Not longer needed as we now assign delays dinamically on scroll (see below) */ 
 
/* $('.post').each(function(index) { 
 
    var delay = $(this).data('delay'); 
 
    if (typeof delay !== typeof undefined && delay !== false) { 
 
     //$(this).css('animation-delay', delay + 's'); 
 
     //$(this).css('-webkit-animation-delay', delay + 's'); 
 
    } 
 
    });*/ 
 
    
 
    var delay = 0; 
 
    $('.post').each(function() { 
 
    var post = $(this); 
 
    if (isScrolledIntoView(post)) { 
 
     /* start animation for visible elements 
 
     see the CSS for more info */ 
 
     post.css({ 
 
      '-webkit-animation-delay': delay + 's', 
 
     \t 'animation-delay': delay + 's', 
 
     \t 'webkit-animation-play-state': 'running', 
 
     \t 'animation-play-state': 'running' 
 
     }); 
 
     delay += 0.2; 
 
    } else { 
 
     post.addClass('hidden'); 
 
    } 
 
    }); 
 
    $(document).on('scroll', function() { 
 
    /** every round starts with 0s delay so following scrolls 
 
     can start animating immediately */ 
 
    var delay = 0; 
 
    $('.post.hidden').each(function() { 
 
     if (isScrolledIntoView(this)) { 
 
     $(this).removeClass('hidden').css({ 
 
      '-webkit-animation-delay': delay + 's', 
 
     \t 'animation-delay': delay + 's', 
 
     \t 'webkit-animation-play-state': 'running', 
 
     \t 'animation-play-state': 'running' 
 
     }); 
 
     delay += 0.2; 
 
     } 
 
    }); 
 
    }); 
 
});
* { 
 
    border: 0; 
 
    margin: 0; 
 
    padding: 0; 
 
    -webkit-appearance: none; 
 
    -webkit-border-radius: 0; 
 
} 
 

 
*, 
 
*:before, 
 
*:after { 
 
    box-sizing: border-box; 
 
} 
 

 
/** this class doesn't really do anything, just used it for 
 
    marking invisible elements. You could use data 
 
    attributes instead, for example */ 
 
.hidden {} 
 

 
.main { 
 
    position: relative; 
 
    display: inline-block; 
 
    height: auto; 
 
    width: 98%; 
 
    margin: 40px auto 0 auto; 
 
    text-align: left; 
 
} 
 

 
.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; 
 
    /** once the animation finishes we stay on the last 
 
     keyframe */ 
 
    -webkit-animation-fill-mode: forwards; 
 
    animation-fill-mode: forwards; 
 
} 
 

 
@-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); 
 
    opacity: 1; 
 
    } 
 
} 
 

 
@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); 
 
    opacity: 1; 
 
    } 
 
} 
 

 
.flipInX { 
 
    -webkit-backface-visibility: visible !important; 
 
    backface-visibility: visible !important; 
 
    -webkit-animation-name: flipInX; 
 
    animation-name: flipInX; 
 
    -webkit-animation-duration: 2s; 
 
    animation-duration: 2s; 
 
    /* this is a nice way to control animation playback */ 
 
    -webkit-animation-play-state: paused; 
 
    animation-play-state: paused; 
 
} 
 

 
.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; 
 
    opacity: 0; 
 
} 
 

 
.homepage .post .h-1 { 
 
    font-size: 26px; 
 
    line-height: 110%; 
 
    margin: 14px 0 10px; 
 
    text-align: center; 
 
} 
 

 
.homepage .post .entry { 
 
    padding: 0 10% 
 
}

來源

2016-03-03 21:28:03 Wazaraki

+0

哇，很好的答案！似乎工作很好，除了當頁面加載時（在Safari上）時，在'.post'元素上沒有任何延遲。 – Draven

+0

我也爲最初可見的項目添加了延遲。最重要的是，一些用於Safari支持的「-webkit」前綴丟失了，所以我添加了它們。請看我更新的anwser和小提琴。它現在應該有希望更好地工作。 – Wazaraki

-1

的flipInX動畫也動畫0％和60％之間的元素的opacity。嘗試刪除動畫中對opacity的引用。

來源

2016-03-02 10:42:07

相關問題

 相關問題