javascript - 重置 CSS3 动画

标签 javascript jquery html css

当一个或多个 DIV 滚动到 View 中时，我正在对它们进行动画处理。我通过将动画 css 分成几个类来做到这一点(见下文)。

动画 DIV 最初将具有类“.mpact-animated”和“.mpact-animated-pause”。 DIV 还将具有以下类之一“.mpact-shake”、“.mpact-heartbeat”或“.mpact-bounce” >'。这些动画类是由用户选择的，因此我不知道要实现哪个。

当页面滚动时，通过 Javascript(见下文)检查 DIV 是否已滚动到 View 中。如果他们有 '.mpact-animated-pause' 类被删除并添加 '.mpact-animated-play' 类。当 DIV 滚动到 View 之外时，“.mpact-animated-play”类将被删除并添加“.mpact-animated-pause”类。

这确实在 DIV 第一次滚动到 View 中时按计划工作，但在随后的 DIV 滚动到 View 中时却没有。

如何重置动画，使其在 DIV 滚出 View 然后返回 View 后重新运行？

注意: 示例 div 中的内联样式也是由用户选择的。

动画 CSS

.mpact-animated {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-delay: 2s;
  animation-delay: 2s;
}

.mpact-animated-play {
    animation-play-state: running !important;
}

.mpact-animated-pause {
    animation-play-state: paused !important;
}    
.mpact-shake {
  -webkit-animation-name: shake;
  animation-name: shake;
}

.mpact-heartbeat {
  -webkit-animation-name: heartbeat;
  animation-name: heartbeat;
  -webkit-animation-iteration-count: 3;
  animation-iteration-count: 3;
}

.mpact-bounce {
  -webkit-animation-name: bounce;
  animation-name: bounce;
  -webkit-transform-origin: center bottom;
  transform-origin: center bottom;
  -webkit-animation-iteration-count: 3;
  animation-iteration-count: 3;
}

@keyframes shake { from, to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 10%, 30%, 50%, 70%, 90% { -webkit-transform: translate3d(-10px, 0, 0); transform: translate3d(-10px, 0, 0); } 20%, 40%, 60%, 80% { -webkit-transform: translate3d(10px, 0, 0); transform: translate3d(10px, 0, 0); } }

@keyframes heartbeat { from { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 50% { -webkit-transform: scale3d(1.05, 1.05, 1.05); transform: scale3d(1.05, 1.05, 1.05); } to { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } }

@keyframes bounce { from, 20%, 53%, 80%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } 40%, 43% { -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); -webkit-transform: translate3d(0, -30px, 0); transform: translate3d(0, -30px, 0); } 70% { -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); -webkit-transform: translate3d(0, -15px, 0); transform: translate3d(0, -15px, 0); } 90% { -webkit-transform: translate3d(0,-4px,0); transform: translate3d(0,-4px,0); } }

JS

function mpactIsInView(elem) {
    var $elem = jQuery(elem);

    var scrollElem = ((navigator.userAgent.toLowerCase().indexOf('webkit') != -1) ? 'body' : 'html');
    var viewportTop = jQuery(scrollElem).scrollTop();
    var viewportBottom = viewportTop + jQuery(window).height();

    var elemTop = Math.round( $elem.offset().top );
    var elemBottom = elemTop + $elem.height();

    return ((elemTop < viewportBottom) && (elemBottom > viewportTop));
}

function mpactCheckAnim() {    
    jQuery( ".mpact-sidebar-cta.cta-container" ).each(function( index, element ) {
        if ( mpactIsInView(jQuery( element ) ) ) {
            jQuery( element ).removeClass('mpact-animated-pause');
            jQuery( element ).addClass('mpact-animated-play');
        } else {
            jQuery( element ).removeClass('mpact-animated-play');
            jQuery( element ).addClass('mpact-animated-pause');
        }
    });
}

jQuery(window).scroll(function(){
    mpactCheckAnim();
});

样本分区

<div class="mpact-sidebar-cta cta-container mpact-animated mpact-animated-pause mpact-shake" style="border-style: dashed; border-width: 3px; border-color: #000; background-color: hsl(130, 97%, 48%);">    
    <div class="mpact-sidebar-cta container-top" style="">                  
        <div class="mpact-sidebar-cta cta-heading-container" style="padding: 20px 20px 5px;">              
            <h2 class="mpact-sidebar-cta heading" style="color: #333;">Heading</h2>        
        </div>    
    </div>    
    <div class="mpact-sidebar-cta container-bottom" style="color: #333;">        
        <div  class="mpact-sidebar-cta cta-content-padding-container" style="padding: 10px 20px;">            
            <div  class="mpact-sidebar-cta cta-content-container" style="">                Enter the text content for the !M CTA.             
            </div><br />            
            <div  class="mpact-sidebar-cta cta-button-container" style="">                
                <a class="x-btn x-btn-global alignright" style="" href="http://www.some-domain.com">Click Here!</a>            
            </div>            
            <div  class="mpact-sidebar-cta cta-call-container" style="">                
                <a class="x-btn x-btn-global alignright" style="" href="tel:+1234567890">Call Us!</a>            
            </div>        
        </div>    
    </div>
</div>

非动画 CSS

.mpact-sidebar-cta.cta-container { width: 100%; display: inline-block; }
. mpact-sidebar-cta.heading { font-size: 20px; line-height: 24px; text-transform:uppercase ; font-weight: 900; -webkit-margin-before: 0em; -webkit-margin-after: 0em; }
. mpact-sidebar-cta.container-top { display: inline-block; width: 100%; }
. mpact-sidebar-cta.container-bottom { display: inline-block; width: 100%; }
. mpact-sidebar-cta.cta-content-padding-container { display: inline-block; width: 100%; }
. mpact-sidebar-cta.cta-content-container { display: inline; }
. mpact-sidebar-cta.cta-button-container { display: inline; }
. mpact-sidebar-cta.cta-call-container { display: none; }

@media (max-width: 1280px) {
/* 13" notebook */

}

@media (max-width: 1024px) {
/* 12" netbook, 10" netbook */

}


@media (max-width: 800px) {
/* Kindle Fire HD 8.9,  */

}

@media (min-width: 768px) {
/* Apple iPads and Up  */
    .cta-button-container { display: inline; }
    .cta-call-container   { display: none; }
}

@media (max-width: 768px) {
/* Apple iPad 1/2/3/mini,  */

}

@media (max-width: 640px) {
/* 480p television */
    .cta-button-container { display: none; }
    .cta-call-container   { display: inline; }
}

@media (max-width: 603px) {
/* Google Nexus 7 */

}

@media (max-width: 600px) {
/* Kindle Fire, Samsung Galaxy Tab */

}

@media (max-width: 533px) {
/* Kindle Fire HD 7 */
    .cta-button-container { display: inline; }
    .cta-call-container   { display: none; }
}

@media (max-width: 360px) {
/* Samsung Galaxy S3/4,  */
    .cta-button-container { display: none; }
    .cta-call-container   { display: inline; }
}

@media (max-width: 320px) {
/* Apple iPhone 3/4/5, Samsung Galaxy SII, ASUS Galaxy 7, LG Optimus S, Blackberry 8300  */

}

最佳答案

看来问题出在预设的迭代次数上。如果你搜索的话，有一些关于 SO 的技巧。 对于您的特定情况，我建议将迭代次数设置为无限，并通过切换类来暂停动画。您可以在暂停类上transform: none，以防动画在某个奇怪的时间停止:

function mpactIsInView(elem) {
  var $elem = jQuery(elem);

  var scrollElem = ((navigator.userAgent.toLowerCase().indexOf('webkit') != -1) ? 'body' : 'html');
  var viewportTop = jQuery(scrollElem).scrollTop();
  var viewportBottom = viewportTop + jQuery(window).height();

  var elemTop = Math.round($elem.offset().top);
  var elemBottom = elemTop + $elem.height();

  return ((elemTop < viewportBottom) && (elemBottom > viewportTop));
}

function mpactCheckAnim() {
  jQuery(".mpact-sidebar-cta.cta-container").each(function(index, element) {
    if (mpactIsInView(jQuery(element))) {
      jQuery(element).removeClass('mpact-animated-pause');
      jQuery(element).addClass('mpact-animated-play');
      var timeout = setTimeout(function() {
        jQuery(element).removeClass('mpact-animated-play');
        jQuery(element).addClass('mpact-animated-pause');
      }, 2000);
    } else {
      jQuery(element).removeClass('mpact-animated-play');
      jQuery(element).addClass('mpact-animated-pause');
    }
  });
}

jQuery(function() {
  jQuery(window).scroll(function() {
    mpactCheckAnim();
  });
});
.container {
  height: 400px;
  overflow: auto;
  padding: 1000px 0;
  box-sizing: content-box;
}
.mpact-animated {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-delay: 2s;
  animation-delay: 2s;
}
.mpact-animated-play {
  animation-play-state: running !important;
}
.mpact-animated-pause {
  animation-play-state: paused !important;
  transform: none;
}
.mpact-shake {
  -webkit-animation-name: shake;
  animation-name: shake;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}
.mpact-heartbeat {
  -webkit-animation-name: heartbeat;
  animation-name: heartbeat;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}
.mpact-bounce {
  -webkit-animation-name: bounce;
  animation-name: bounce;
  -webkit-transform-origin: center bottom;
  transform-origin: center bottom;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}
@keyframes shake {
  from, to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  10%,
  30%,
  50%,
  70%,
  90% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }
  20%,
  40%,
  60%,
  80% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }
}
@keyframes heartbeat {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05);
  }
  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
@keyframes bounce {
  from, 20%, 53%, 80%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  40%,
  43% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -webkit-transform: translate3d(0, -30px, 0);
    transform: translate3d(0, -30px, 0);
  }
  70% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -webkit-transform: translate3d(0, -15px, 0);
    transform: translate3d(0, -15px, 0);
  }
  90% {
    -webkit-transform: translate3d(0, -4px, 0);
    transform: translate3d(0, -4px, 0);
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<div class="container">
  <div class="mpact-sidebar-cta cta-container mpact-animated mpact-animated-pause mpact-shake" style="border-style: dashed; border-width: 3px; border-color: #000; background-color: hsl(130, 97%, 48%);">
    <div class="mpact-sidebar-cta container-top" style="">
      <div class="mpact-sidebar-cta cta-heading-container" style="padding: 20px 20px 5px;">
        <h2 class="mpact-sidebar-cta heading" style="color: #333;">Heading</h2>
      </div>
    </div>
    <div class="mpact-sidebar-cta container-bottom" style="color: #333;">
      <div class="mpact-sidebar-cta cta-content-padding-container" style="padding: 10px 20px;">
        <div class="mpact-sidebar-cta cta-content-container" style="">Enter the text content for the !M CTA.
        </div>
        <br />
        <div class="mpact-sidebar-cta cta-button-container" style="">
          <a class="x-btn x-btn-global alignright" style="" href="http://www.some-domain.com">Click Here!</a>
        </div>
        <div class="mpact-sidebar-cta cta-call-container" style="">
          <a class="x-btn x-btn-global alignright" style="" href="tel:+1234567890">Call Us!</a>
        </div>
      </div>
    </div>
  </div>
</div>

关于javascript - 重置 CSS3 动画，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37461046/

上一篇：php - 将 php 表打印为 pdf

下一篇：javascript - Material-ui ToolbarTitle 失去了它的字体系列

相关文章：

html - <td> 顶部的每个图标

javascript - 使用 google 图表 api 和 sql

javascript - 如何交换 CSS - 无法获取元素样式表 [object HTMLLinkElement]

jquery - File API 文件上传 - 读取 ASP.NET MVC 中的 XMLHttpRequest

javascript - 如何使用类选择器根据其同级选择的更改事件更新标签

javascript - 如何在 Spring MVC 4 和 HTML5 应用程序上添加带有 JS 和 CSS 的导入文件？

html - 如何将溢出的列表元素移动到新列？

javascript - 为什么将一个函数(属于一个对象)分配给一个变量会有这样的行为？

javascript数字01和1之间的区别

javascript - 传单.js : How to remove multiple layers from map

©2024 IT工具网  联系我们