播放 css 动画显示：none class

Question

我有一些使用 jQuery 和 JavaScript 的代码，当您滚动到 windows 视口时，任何带有 css 动画 class 的元素都会被应用.现在我的网站有一部分隐藏在 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>

Answer 1

发生这种情况有 3 个原因。

在将显示设置为 none.
之前，单击“少看”按钮时从未删除动画样式 class
- 因此，元素隐藏了，但在重新出现时，因为它们有动画 class，它们同时重新动画。
当点击显示更多按钮时，所有这些都会立即动画，因为在页面末尾时，浏览器会自动触发滚动事件，但正确的偏移量不会更新时间.
- 因此，浏览器认为所有元素在页面末尾具有相同的偏移量，因此对它们进行动画处理
Jquery 的滚动事件侦听器在到达页面末尾后停止触发。不确定是什么原因造成的，但我知道他们有时会实现与大多数浏览器不同的事件监听器。

修复：

用原生javascript/browser替换jquery“滚动”事件监听器API滚动事件监听器
每当点击查看更多或更少按钮时删除动画 class。
- 归根结底，我们只需要用户滚动时的动画 class

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

播放 css 动画显示：none class

play css animation with a display: none class

javascript

animation

css-animations

display