字幕动画正在重置

问题描述 投票：0回答：1

动画工作完美，但是，在一定的 x 时间段后，它返回到初始状态“0%”，但是我想要的是它是无限的并继续。

运行代码片段，观察一段时间，可以看到效果非常完美，无限向左移动，又向右返回，但在某个时刻，会出现“闪烁”的情况发生时，它将重新启动动画和项目。

div.app-marquee-container {
  position: relative;
  cursor: default;
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid var(--outline);
  background-color: var(--neutral-base);
  -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10 and IE 11 */
  user-select: none; /* Standard syntax */
}

div.app-marquee-container:hover {
  cursor: pointer;
}

div.app-marquee-container:hover div.marquee-config-action-container {
  display: block;
}

div.marquee-container {
  position: relative;
  width: 100%;
}

div.marquee-subcontainer {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 16px;
  animation: marquee 50s linear infinite forwards;
}

div.marquee-config-action-container {
  right: 0;
  position: absolute;
  display: none;
  width: 40px;
  box-shadow: 0px 2px 12px 0px #3944561F;
  background-color: var(--neutral-base);
}

ul {
  height: 40px;
  width: 80%;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 16px;
}

ul li {
  width: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
}

ul li span {
  font-size: 12px;
  font-weight: 400;
}

@keyframes marquee {
  from { -webkit-transform: translateX(0vw) }
  to { -webkit-transform: translateX(-100vw) }
}
 <div class="app-marquee-container">
      <div class="marquee-container">
        <div class="marquee-subcontainer">
          <div class="marquee-subitem-container">
            <ul>
              <li>
                <span>MSFT34</span>
                <span>1200.24</span>
                <span>100%</span>
              </li>
              
              <li>
                <span>MSFT34</span>
                <span>1200.24</span>
                <span>100%</span>
              </li>
              
              <li>
                <span>MSFT34</span>
                <span>1200.24</span>
                <span>100%</span>
              </li>
              
              <li>
                <span>MSFT34</span>
                <span>1200.24</span>
                <span>100%</span>
              </li>
              
              <li>
                <span>MSFT34</span>
                <span>1200.24</span>
                <span>100%</span>
              </li>
              
              <li>
                <span>MSFT34</span>
                <span>1200.24</span>
                <span>100%</span>
              </li>
              
              <li>
                <span>MSFT34</span>
                <span>1200.24</span>
                <span>100%</span>
              </li>
              
              <li>
                <span>MSFT34</span>
                <span>1200.24</span>
                <span>100%</span>
              </li>
              
              <li>
                <span>MSFT34</span>
                <span>1200.24</span>
                <span>100%</span>
              </li>
              
              <li>
                <span>MSFT34</span>
                <span>1200.24</span>
                <span>100%</span>
              </li>
              
              <li>
                <span>MSFT34</span>
                <span>1200.24</span>
                <span>100%</span>
              </li>
              
              <li>
                <span>MSFT34</span>
                <span>1200.24</span>
                <span>100%</span>
              </li>
              
              <li>
                <span>MSFT34</span>
                <span>1200.24</span>
                <span>100%</span>
              </li>
              
              <li>
                <span>MSFT34</span>
                <span>1200.24</span>
                <span>100%</span>
              </li>
              
              <li>
                <span>MSFT34</span>
                <span>1200.24</span>
                <span>100%</span>
              </li>
              
              <li>
                <span>MSFT34</span>
                <span>1200.24</span>
                <span>100%</span>
              </li>
              
              <li>
                <span>MSFT34</span>
                <span>1200.24</span>
                <span>100%</span>
              </li>
              
              <li>
                <span>MSFT34</span>
                <span>1200.24</span>
                <span>100%</span>
              </li>
              
              <li>
                <span>MSFT34</span>
                <span>1200.24</span>
                <span>100%</span>
              </li>
              
              <li>
                <span>MSFT34</span>
                <span>1200.24</span>
                <span>100%</span>
              </li>
            </ul>
          </div>
    
          <div class="marquee-subitem-container">
<ul>
              <li>
                <span>MSFT34</span>
                <span>1200.24</span>
                <span>100%</span>
              </li>
              
              <li>
                <span>MSFT34</span>
                <span>1200.24</span>
                <span>100%</span>
              </li>
              
              <li>
                <span>MSFT34</span>
                <span>1200.24</span>
                <span>100%</span>
              </li>
              
              <li>
                <span>MSFT34</span>
                <span>1200.24</span>
                <span>100%</span>
              </li>
              
              <li>
                <span>MSFT34</span>
                <span>1200.24</span>
                <span>100%</span>
              </li>
              
              <li>
                <span>MSFT34</span>
                <span>1200.24</span>
                <span>100%</span>
              </li>
              
              <li>
                <span>MSFT34</span>
                <span>1200.24</span>
                <span>100%</span>
              </li>
              
              <li>
                <span>MSFT34</span>
                <span>1200.24</span>
                <span>100%</span>
              </li>
              
              <li>
                <span>MSFT34</span>
                <span>1200.24</span>
                <span>100%</span>
              </li>
              
              <li>
                <span>MSFT34</span>
                <span>1200.24</span>
                <span>100%</span>
              </li>
              
              <li>
                <span>MSFT34</span>
                <span>1200.24</span>
                <span>100%</span>
              </li>
              
              <li>
                <span>MSFT34</span>
                <span>1200.24</span>
                <span>100%</span>
              </li>
              
              <li>
                <span>MSFT34</span>
                <span>1200.24</span>
                <span>100%</span>
              </li>
              
              <li>
                <span>MSFT34</span>
                <span>1200.24</span>
                <span>100%</span>
              </li>
              
              <li>
                <span>MSFT34</span>
                <span>1200.24</span>
                <span>100%</span>
              </li>
              
              <li>
                <span>MSFT34</span>
                <span>1200.24</span>
                <span>100%</span>
              </li>
              
              <li>
                <span>MSFT34</span>
                <span>1200.24</span>
                <span>100%</span>
              </li>
              
              <li>
                <span>MSFT34</span>
                <span>1200.24</span>
                <span>100%</span>
              </li>
              
              <li>
                <span>MSFT34</span>
                <span>1200.24</span>
                <span>100%</span>
              </li>
              
              <li>
                <span>MSFT34</span>
                <span>1200.24</span>
                <span>100%</span>
              </li>
            </ul>
          </div>
        </div>
      </div>
    
      <div class="marquee-config-action-container">
        <button>FAKE</button>
      </div>
    </div>

angular sass css-animations angular-animations
1个回答
0
投票

您试图实现的选框效果是通过将项目向左平移（使用translateX(-100vw)）来实现的，并且由于它设置为无限，因此一旦到达末尾，它就会从头开始。您看到的“闪烁”或重置是从头开始的动画。

为了实现无缝的无限滚动效果而不出现这种“闪烁”，内容本身必须被复制，以便当原始内容完成滚动到视图之外时，重复的内容开始出现。

解决方案如下：

复制内容，看起来您已经有了。

调整关键帧，使内容滚动 50%（一半）而不是完全 100%。因为，当你到达一半时，重复的内容就会开始并且循环继续。

像这样更新关键帧：

@keyframes marquee {
  0% { transform: translateX(0%); }
  100% { transform: translateX(-50%); }
}

.marquee-subcontainer 将容纳原始内容的两倍。当动画完成一个周期（50% 滚动）时，第二个副本将位于起始位置，从而产生无限滚动的错觉。由于您已经复制了 HTML 中的内容，因此唯一需要的更改是在关键帧中，如上所述。

我还应该提到，当内容可均匀划分到视口中时，此方法效果最佳，因此您可能需要调整内容长度或视口宽度以实现完美的无缝过渡。请记住这一点。

如果您打算将数据更改为动态数据而不是像这样显式键入，这会容易得多。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.