时间戳

首页 > 解决方案 > 尽管 100% translate tx 设置为 -100%，但 CSS 关键帧并未完全移出屏幕

jquery - 尽管 100% translate tx 设置为 -100%，但 CSS 关键帧并未完全移出屏幕

问题描述

// Sample items to add to the news-ticker
let sampleNewsItems = [
  "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
  "Vivamus enim magna, elementum in consectetur sit amet, porta ut eros"
];

// Iterate through the sample news items and process accordingly
let nextTimeoutDur;
for (let x = 0; x < sampleNewsItems.length; x++) {
  let screenWidth = $(window).innerWidth();
  $('.ticker-wrap').width(screenWidth);

  $(".ticker-wrap").append('<div class="ticker-item" data-index="' + x + '"><span class="tickerContent"></span></div>');
  $('.ticker-item[data-index="' + x + '"] .tickerContent').html(sampleNewsItems[x]);

  let newsItemLength = 500;
  $('.ticker-item[data-index="' + (x - 1) + '"]').outerWidth(500);

  let tickerDur = 7;
  nextTimeoutDur = x > 0 ? (tickerDur * newsItemLength) / screenWidth : 0;

  $(".ticker-item[data-index=" + x + "]").css("animation", "ticker " + tickerDur + "s  linear " + nextTimeoutDur + "s  infinite");
}
@keyframes ticker {
  0% {
    transform: translate3d(100vw, 0, 0);
    visibility: visible;
  }
  100% {
    transform: translate3d(-100%, 0, 0);
  }
}

.ticker-wrap {
  width: 100%;
}

.ticker-wrap .ticker-item {
  display: inline-block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="ticker-wrap"></div>

我希望第二个代码项目在它消失之前完全离开视口，这就是为什么我将transform: translate3d(-100%, 0, 0);关键帧设置为 100%。但是，一旦第一个项目消失，第二个代码项目就会从视口中消失。为什么会这样？我该如何解决？

这是带有我的代码的 CodePen。

https://codepen.io/prizzi13/pen/JwGmGE

标签： jquerycss

解决方案

position的.ticker-item应该是absolute

推荐阅读