时间戳

首页 > 解决方案 > 当它可见时如何启动此动画？

javascript - 当它可见时如何启动此动画？

问题描述

.responsive {
  width:200px;
  float:left;
  margin-top: 750px;
  margin-bottom: 750px;
}

.st0 {
  fill: #ffffff;
}

.st1 {
  fill: none;
  stroke: #afafaf;
  stroke-width: 4;
  stroke-miterlimit: 10;
}

.st2 {
  fill: #ffffff;
  stroke: #afafaf;
  stroke-width: 4;
  stroke-miterlimit: 10;
}

.st3 {
  fill: none;
  stroke: #2646ff;
  stroke-width: 7;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-miterlimit: 10;
}

#responsive .st3 {
  stroke-dasharray: 1932;
  stroke-dashoffset: 0;
  animation: responsive 4s ease-in-out 0s;
  animation-direction: reverse;
}
@keyframes responsive {
  to {
    stroke-dashoffset: 1932;
  }
}
<div class="responsive">

<svg
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          xmlns:xlink="http://www.w3.org/1999/xlink"
          x="0px"
          y="0px"
          viewBox="0 0 1200 780"
          style="enable-background:new 0 0 1200 780;"
          xml:space="preserve"
        >
          <g id="Layer_1"></g>
          <g id="Layer_6">
            <g>
              <g>
                <path
                  class="st0"
                  d="M1198,772.2c0,2.8-2.2,5-5,5H7c-2.8,0-5-2.2-5-5V36.6c0-2.8,2.2-5,5-5h1186c2.8,0,5,2.2,5,5V772.2z"
                />
                <path
                  class="st1"
                  d="M1198,772.2c0,2.8-2.2,5-5,5H7c-2.8,0-5-2.2-5-5V36.6c0-2.8,2.2-5,5-5h1186c2.8,0,5,2.2,5,5V772.2z"
                />
              </g>
              <line class="st1" x1="2" y1="688.2" x2="1198" y2="688.2" />
              <ellipse class="st2" cx="559.9" cy="732.7" rx="16.9" ry="16.7" />
            </g>
          </g>
          <g id="Layer_5">
            <g>
              <g>
                <path
                  class="st0"
                  d="M1127.3,771.9c0,2.8-2.2,5-5,5H631.5c-2.8,0-5-2.2-5-5V194.2c0-2.8,2.2-5,5-5h490.8c2.8,0,5,2.2,5,5V771.9z"
                />
                <path
                  class="st1"
                  d="M1127.3,771.9c0,2.8-2.2,5-5,5H631.5c-2.8,0-5-2.2-5-5V194.2c0-2.8,2.2-5,5-5h490.8c2.8,0,5,2.2,5,5V771.9z"
                />
              </g>
              <line class="st1" x1="626.5" y1="715.5" x2="1127.3" y2="715.5" />
            </g>
          </g>
          <g id="Layer_4">
            <g>
              <g>
                <path
                  class="st0"
                  d="M1198,771.9c0,2.8-2.2,5-5,5H976.8c-2.8,0-5-2.2-5-5V352.1c0-2.8,2.2-5,5-5H1193c2.8,0,5,2.2,5,5V771.9z"
                />
                <path
                  class="st1"
                  d="M1198,771.9c0,2.8-2.2,5-5,5H976.8c-2.8,0-5-2.2-5-5V352.1c0-2.8,2.2-5,5-5H1193c2.8,0,5,2.2,5,5V771.9z"
                />
              </g>
              <line class="st1" x1="971.8" y1="732" x2="1198" y2="732" />
            </g>
          </g>
          <g id="responsive">
            <g>
              <path
                class="st3"
                d="M2,35.9L2,772.2 C2,775 4.2,777.2 7,777.2 L1194.1,777.2"
              />
            </g>
          </g>
        </svg>
        
        
        </div>

在片段中向下滚动以查看 svg + 动画。

我想在看到 svg（动画）时开始这个动画。我怎样才能做到这一点？我遇到了很多 javascript 代码，但问题是它对于不同类型的类等都太复杂了。我只想启动动画 1 次，然后将其保持在结束状态（所以不要循环或任何东西）。

我给该部分.responsive顶部和底部一些边距，通常在白色区域之间有内容。

标签： javascripthtmlcsssvgcss-animations

解决方案

如果您想要一个简单的解决方案，那么 WOW.js是您的选择 :) 为您的 svg 添加动画的步骤：

  1. 按照插件文档中的说明安装 wow.js。
  2. 将wow类名添加到您的动画包装器中，然后启动 css 动画

.animated #responsive .st3 {
  stroke-dasharray: 1932;
  stroke-dashoffset: 0;
  animation: responsive 4s ease-in-out 0s;
  animation-direction: reverse;
}

  1. 这是 wow.js init 的示例：)

wow = new WOW(
  {
  boxClass:     'wow',      // add this className to animation wrapper
  animateClass: 'animated', // class added by lib, when your item are in view
  offset:       0,          // number of px before item appear on screen and animation starts
  mobile:       true,       // default
  live:         true        // `true` if you add items on page dynamically
}
)
wow.init();

推荐阅读