javascript - 重置 CSS3 动画-6ren

javascript - 重置 CSS3 动画

转载作者：行者123 更新时间：2023-11-28 05:48:43

当一个或多个 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); } }

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/

文章推荐： ios - 如何在 iOS 推送通知中显示 Rs 符号 (?)？

文章推荐： javascript - 在 Uint8ClampedArray 中设置比 for 循环更快

文章推荐： javascript - AngularJS - 使用过滤器和 groupBy 后计算结果

文章推荐： ios - 从 firebase + iOS 获取数据时加载数据缓慢

node.js - Chrome 的跟踪事件分析工具中的自上而下(树)、自上而下(重)和自下而上(重)有什么区别
我正在尝试使用谷歌浏览器的 Trace Event Profiling Tool分析我正在运行的 Node.js 应用程序。选择点样本后，我可以在三种 View 之间进行选择: 自上而下(树) 自上而
android - 重 ContentProvider 查询和 ListView
对于一个可能是菜鸟的问题，我们深表歉意，但尽管在 SO 上研究了大量教程和其他问题，但仍找不到答案。我想做的很简单:显示一个包含大量数据库存储字符串的 Android ListView。我所说的“很
css - 基础 5 div 重
我已经开始了一个新元素的工作，并决定给 Foundation 5 一个 bash，看看它是什么样的。在创建带有水平字段的表单时，我在文档中注意到的第一件事是它们使用大量 div 来设置样式。所以我在下
.net - 重 CPU 负载下的跨线程 BeginInvoke 阻塞
我有一个 Windows 窗体用户控件，其中包含一个使用 BeginInvoke 委托(delegate)调用从单独线程更新的第 3 方图像显示控件。在繁重的 CPU 负载下，UI 会锁定。当我附加
javascript - 什么是测试 Dom 重 js 的好方法？
我有一堆严重依赖dom元素的JS代码。我目前使用的测试解决方案依赖于 Selenium ，但 AFAIK 无法正确评估 js 错误(addScript 错误不会导致您的测试失败，而 getEval 会
Java Swing 重/慢 paintComponent - 有什么建议吗？
我正在制作一款基于滚动 2D map /图 block 的游戏。每个图 block (存储为图 block [21][11] - 每个 map 总共 231 个图 block )最多可以包含 21 个
javascript - 在网页上 - 如何显示(轻)图像并在客户端下载后者时将其替换为(重)图像？
考虑到以下情况，我是前端初学者: 某个 HTML 页面应该包含一个沉重的图像(例如 - 动画 gif)，但我不想强制客户缓慢地等待它完全下载才能享受一个漂亮的页面，而是我更愿意给他看一个轻量级图像(例
python - 重 I/O 和 python 多处理/多线程
我正在设计一个小软件，其中包括: 在互联网上获取资源，一些用户交互(资源的快速编辑)，一些处理。我想使用许多资源(它们都列在列表中)来这样做。每个都独立于其他。由于编辑部分很累，我想让用户(可能
c# - 重 I/O 操作中的 Parallel.ForEach 与异步 For 循环
我想比较两个理论场景。为了问题的目的，我简化了案例。但基本上它是您典型的生产者消费者场景。 (我关注的是消费者)。我有一个很大的Queue dataQueue我必须将其传输给多个客户端。那么让我们
python - K 重 CV 的变体，其中 size(test_set) > N/K
我有一个二元分类问题，标签 0 和 1(少数)存在巨大不平衡。由于测试集带有标签 1 的行太少，因此我将训练测试设置为至少 70-30 或 60-40，因此仍然有重要的观察结果。由于我没有过多地衡量准

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 重置 CSS3 动画