用display:noneclass播放css影片-有解無憂

我有一些使用 jQuery 和 JavaScript 的代碼，當你滾動到 windows 視口時，任何帶有 css 影片類的元素都會被應用。現在，我的網站有一部分隱藏在 display: none 中，當您單擊按鈕時，會運行一個簡單的函式，應用 display: none 和 display: block。

我遇到的問題是，當我單擊按鈕以顯示所有影片一次播放的隱藏內容時，實際上它們應該繼續檔案流并且僅在用戶滾動到視口時才影片。

我放置了多個虛擬元素，以便您在滾動時可以看到效果。

我該如何解決這個問題？

function see_more(){
    document.getElementById("hide").style.display = 'block';
    document.getElementById("seeMore").style.display =`none`;
  document.getElementById("seeLess").style.display =`block`;
}

function see_less(){
    document.getElementById("hide").style.display = 'none';
    document.getElementById("seeMore").style.display =`block`;
  document.getElementById("seeLess").style.display =`none`;
}



jQuery(function($) {
  
  var doAnimations = function() {
    
    var offset = $(window).scrollTop()   $(window).height(),
        $animatables = $('.animatable');
    
    if ($animatables.length == 0) {  
      $(window).off('scroll', doAnimations);
    }
        $animatables.each(function(i) {   
        $animatable = $(this);
            if (($animatable.offset().top   $animatable.height()  65) < offset) { 
        $animatable.removeClass('animatable').addClass('animated');
            }
    });

    };
  
    $(window).on('scroll', doAnimations);
  $(window).trigger('scroll');

});

#seeLess{
    display: none;
}

#hide{
    display: none;
}


/* A N I M A T I O N */

.animatable {
  
  /* initially hide animatable objects */
  visibility: hidden;
  
  /* initially pause animatable objects their animations */
  -webkit-animation-play-state: paused;   
  -moz-animation-play-state: paused;     
  -ms-animation-play-state: paused;
  -o-animation-play-state: paused;   
  animation-play-state: paused; 
}

/* show objects being animated */
.animated {
  visibility: visible;
  
  -webkit-animation-fill-mode: both;
  -moz-animation-fill-mode: both;
  -ms-animation-fill-mode: both;
  -o-animation-fill-mode: both;
  animation-fill-mode: both;
  
  -webkit-animation-duration: 1s;
  -moz-animation-duration: 1s;
  -ms-animation-duration: 1s;
  -o-animation-duration: 1s;
  animation-duration: 1s;

  -webkit-animation-play-state: running;
  -moz-animation-play-state: running;
  -ms-animation-play-state: running;
  -o-animation-play-state: running;
  animation-play-state: running;
}

@keyframes bounceIn {
    0% {
        opacity: 0;
        transform: scale(.3);
    }

    50% {
        transform: scale(1.05);
    }

    70% {
        transform: scale(.9);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.animated.bounceIn {
    -webkit-animation-name: bounceIn;
    -moz-animation-name: bounceIn;
    -o-animation-name: bounceIn;
    animation-name: bounceIn;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p class=" animatable bounceIn">Lion Cut</p>
    <div class=" animatable bounceIn" style="margin-bottom: 300px;">
        <p>This is one of our specialty Services, the Lion Cut. One of our customers favorite cuts,
        have your favorite pet looking like a majestic king or queen in no time!
        </p>
    </div>
    <p class=" animatable bounceIn">Lion Cut</p>
    <div class=" animatable bounceIn" style="margin-bottom: 300px;">
        <p>This is one of our specialty Services, the Lion Cut. One of our customers favorite cuts,
        have your favorite pet looking like a majestic king or queen in no time!
        </p>
    </div>
    <p class=" animatable bounceIn">Lion Cut</p>
    <div class=" animatable bounceIn" style="margin-bottom: 300px;">
        <p>This is one of our specialty Services, the Lion Cut. One of our customers favorite cuts,
        have your favorite pet looking like a majestic king or queen in no time!
        </p>
    </div>
    <p class=" animatable bounceIn">Lion Cut</p>
    <div class=" animatable bounceIn" style="margin-bottom: 300px;">
        <p>This is one of our specialty Services, the Lion Cut. One of our customers favorite cuts,
        have your favorite pet looking like a majestic king or queen in no time!
        </p>
    </div>
    <p class=" animatable bounceIn">Lion Cut</p>
    <div class=" animatable bounceIn" style="margin-bottom: 300px;">
        <p>This is one of our specialty Services, the Lion Cut. One of our customers favorite cuts,
        have your favorite pet looking like a majestic king or queen in no time!
        </p>
    </div>
    <p class=" animatable bounceIn">Lion Cut</p>
    <div class=" animatable bounceIn" style="margin-bottom: 300px;">
        <p>This is one of our specialty Services, the Lion Cut. One of our customers favorite cuts,
        have your favorite pet looking like a majestic king or queen in no time!
        </p>
    </div>
    <div class="container-fluid"><button id="seeMore" onclick="see_more()">See all services</button></div>
    <div id="hide">
        <p class=" animatable bounceIn">Lion Cut</p>
        <div class=" animatable bounceIn" style="margin-bottom: 300px;">
            <p>This is one of our specialty Services, the Lion Cut. One of our customers favorite cuts,
            have your favorite pet looking like a majestic king or queen in no time!
            </p>
        </div>
        <p class=" animatable bounceIn">Lion Cut</p>
        <div class=" animatable bounceIn" style="margin-bottom: 300px;">
            <p>This is one of our specialty Services, the Lion Cut. One of our customers favorite cuts,
            have your favorite pet looking like a majestic king or queen in no time!
            </p>
        </div>
        <p class=" animatable bounceIn">Lion Cut</p>
        <div class=" animatable bounceIn" style="margin-bottom: 300px;">
            <p>This is one of our specialty Services, the Lion Cut. One of our customers favorite cuts,
            have your favorite pet looking like a majestic king or queen in no time!
            </p>
        </div>
        <p class=" animatable bounceIn">Lion Cut</p>
        <div class=" animatable bounceIn" style="margin-bottom: 300px;">
            <p>This is one of our specialty Services, the Lion Cut. One of our customers favorite cuts,
            have your favorite pet looking like a majestic king or queen in no time!
            </p>
        </div>
    </div>
  <div class="container-fluid"><button id="seeLess" onclick="see_less()">See less</button></div>

uj5u.com熱心網友回復：

發生這種情況有 3 個原因。

在將 display 設定為 none 之前，當點擊 see less 按鈕時，影片樣式類從未被洗掉。
- 因此，元素隱藏了，但在重新出現時，因為它們有影片類，它們同時重新影片。
當單擊顯示更多按鈕時，所有這些都會立即影片，因為在頁面末尾時，瀏覽器會自動觸發滾動事件，但正確的偏移量不會及時更新。
- 因此，瀏覽器認為所有元素在頁面末尾都具有相同的偏移量，因此將它們全部影片化
Jquery 的滾動事件偵聽器在到達頁面末尾后停止觸發。不確定是什么原因造成的，但我知道他們有時會實作與大多數瀏覽器不同的事件偵聽器。

修復：

用原生 javascript/browser API 滾動事件監聽器替換 jquery “scroll” 事件監聽器
每當單擊“查看更多”或“查看更少”按鈕時洗掉影片類。
- 歸根結底，我們只想要用戶滾動時的影片類

（所有問題都存在于 javascript、css 和 html 中）

以下是您的 javascript 代碼的快速修復版本。但是，我建議對該版本進行一些重構，以洗掉重復的代碼。

讓我知道這是否有幫助:)！

var doAnimations = function() {
    
    var offset = $(window).scrollTop()   $(window).height(),
        $animatables = $('.animatable');
      
    if ($animatables.length == 0) {  
      $(window).off('scroll', doAnimations);
    }
        $animatables.each(function(i) {   
        $animatable = $(this);
            if (($animatable.offset().top   $animatable.height()  65) < offset) { 
        $animatable.removeClass('animatable').addClass('animated');
            }
    });

    };

function see_more(){
          $animatables = $('.animated');
      $animatables.each(function(i) {
        var offset = $(window).scrollTop()   $(window).height(),
          $animatable = $(this);
         if (($animatable.offset().top   $animatable.height()  65) < offset) {
          $animatable.removeClass('animated').addClass('animatable');
         }
    }); 
    document.getElementById("hide").style.display = 'block';
    document.getElementById("seeMore").style.display =`none`;
  document.getElementById("seeLess").style.display =`block`;
  $(window).on('scroll', doAnimations);
}

function see_less(){
        $animatables = $('.animated');
      $animatables.each(function(i) {
        var offset = $(window).scrollTop()   $(window).height(),
          $animatable = $(this);
         if (($animatable.offset().top   $animatable.height()  65) < offset) {
          $animatable.removeClass('animated').addClass('animatable');
         }
    }); 
    document.getElementById("hide").style.display = 'none';
    document.getElementById("seeMore").style.display =`block`;
  document.getElementById("seeLess").style.display =`none`;


}


$(window).trigger('scroll');
window.addEventListener("scroll", doAnimations);

#seeLess{
    display: none;
}

#hide{
    display: none;
}


/* A N I M A T I O N */

.animatable {
  
  /* initially hide animatable objects */
  visibility: hidden;
  
  /* initially pause animatable objects their animations */
  -webkit-animation-play-state: paused;   
  -moz-animation-play-state: paused;     
  -ms-animation-play-state: paused;
  -o-animation-play-state: paused;   
  animation-play-state: paused; 
}

/* show objects being animated */
.animated {
  visibility: visible;
  
  -webkit-animation-fill-mode: both;
  -moz-animation-fill-mode: both;
  -ms-animation-fill-mode: both;
  -o-animation-fill-mode: both;
  animation-fill-mode: both;
  
  -webkit-animation-duration: 1s;
  -moz-animation-duration: 1s;
  -ms-animation-duration: 1s;
  -o-animation-duration: 1s;
  animation-duration: 1s;

  -webkit-animation-play-state: running;
  -moz-animation-play-state: running;
  -ms-animation-play-state: running;
  -o-animation-play-state: running;
  animation-play-state: running;
}

@keyframes bounceIn {
    0% {
        opacity: 0;
        transform: scale(.3);
    }

    50% {
        transform: scale(1.05);
    }

    70% {
        transform: scale(.9);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.animated.bounceIn {
    -webkit-animation-name: bounceIn;
    -moz-animation-name: bounceIn;
    -o-animation-name: bounceIn;
    animation-name: bounceIn;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p class=" animatable bounceIn">Lion Cut</p>
    <div class=" animatable bounceIn" style="margin-bottom: 300px;">
        <p>This is one of our specialty Services, the Lion Cut. One of our customers favorite cuts,
        have your favorite pet looking like a majestic king or queen in no time!
        </p>
    </div>
    <p class=" animatable bounceIn">Lion Cut</p>
    <div class=" animatable bounceIn" style="margin-bottom: 300px;">
        <p>This is one of our specialty Services, the Lion Cut. One of our customers favorite cuts,
        have your favorite pet looking like a majestic king or queen in no time!
        </p>
    </div>
    <p class=" animatable bounceIn">Lion Cut</p>
    <div class=" animatable bounceIn" style="margin-bottom: 300px;">
        <p>This is one of our specialty Services, the Lion Cut. One of our customers favorite cuts,
        have your favorite pet looking like a majestic king or queen in no time!
        </p>
    </div>
    <p class=" animatable bounceIn">Lion Cut</p>
    <div class=" animatable bounceIn" style="margin-bottom: 300px;">
        <p>This is one of our specialty Services, the Lion Cut. One of our customers favorite cuts,
        have your favorite pet looking like a majestic king or queen in no time!
        </p>
    </div>
    <p class=" animatable bounceIn">Lion Cut</p>
    <div class=" animatable bounceIn" style="margin-bottom: 300px;">
        <p>This is one of our specialty Services, the Lion Cut. One of our customers favorite cuts,
        have your favorite pet looking like a majestic king or queen in no time!
        </p>
    </div>
    <p class=" animatable bounceIn">Lion Cut</p>
    <div class=" animatable bounceIn" style="margin-bottom: 300px;">
        <p>This is one of our specialty Services, the Lion Cut. One of our customers favorite cuts,
        have your favorite pet looking like a majestic king or queen in no time!
        </p>
    </div>
    <div class="container-fluid"><button id="seeMore" onclick="see_more()">See all services</button></div>
    <div id="hide">
        <p class=" animatable bounceIn">Lion Cut</p>
        <div class=" animatable bounceIn" style="margin-bottom: 300px;">
            <p>This is one of our specialty Services, the Lion Cut. One of our customers favorite cuts,
            have your favorite pet looking like a majestic king or queen in no time!
            </p>
        </div>
        <p class=" animatable bounceIn">Lion Cut</p>
        <div class=" animatable bounceIn" style="margin-bottom: 300px;">
            <p>This is one of our specialty Services, the Lion Cut. One of our customers favorite cuts,
            have your favorite pet looking like a majestic king or queen in no time!
            </p>
        </div>
        <p class=" animatable bounceIn">Lion Cut</p>
        <div class=" animatable bounceIn" style="margin-bottom: 300px;">
            <p>This is one of our specialty Services, the Lion Cut. One of our customers favorite cuts,
            have your favorite pet looking like a majestic king or queen in no time!
            </p>
        </div>
        <p class=" animatable bounceIn">Lion Cut</p>
        <div class=" animatable bounceIn" style="margin-bottom: 300px;">
            <p>This is one of our specialty Services, the Lion Cut. One of our customers favorite cuts,
            have your favorite pet looking like a majestic king or queen in no time!
            </p>
        </div>
    </div>
  <div class="container-fluid"><button id="seeLess" onclick="see_less()">See less</button></div>

轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/335518.html

標籤：javascript 动画片 css动画展示

上一篇：如何（影片）從中心而不是從左側向外擴展

下一篇：Javafx插值預測/過沖