如何将滚动类添加到元素并在完成后将其删除

Question

我试图每1分钟向文本添加一个滚动类，一旦文本完成滚动，我将删除该类并等待下一个1分钟。请任何人帮助我，以下是我的示例代码，但无法正常使用。

$(function(event){
	$infoLongMessage = $("#infoLongMessage");
    var wait = 60000;
	var timer = ($infoLongMessage.text().length + wait);

	setInterval(function(){
		$infoLongMessage.toggleClass("scroll-left");
	}, timer);
 })

.content{
  background-color: #000;
  color: #fff;
  padding: 6px 10px; 
  overflow: hidden;
  }
#infoLongMessage{
  overflow: hidden;
  white-space: pre;
  display:block;
}


.scroll-left{
   /* Starting position */
   -moz-transform:translateX(100%);
   -webkit-transform:translateX(100%);	
   transform:translateX(100%);
   /* Apply animation to this element */	
   -moz-animation: scrollleft 15s linear infinite;
   -webkit-animation: scrollleft 15s linear infinite;
   animation: scrollleft 15s linear infinite;
}
	
  
/* Move it (define the animation) */
@-moz-keyframes scrollleft {
 0%   { -moz-transform: translateX(100%); }
 100% { -moz-transform: translateX(-100%); }
}
@-webkit-keyframes scrollleft {
 0%   { -webkit-transform: translateX(100%); }
 100% { -webkit-transform: translateX(-100%); }
}
@keyframes scrollleft {
 0%   { 
 -moz-transform: translateX(100%); /* Firefox bug fix */
 -webkit-transform: translateX(100%); /* Firefox bug fix */
 transform: translateX(100%); 		
 }
 100% { 
 -moz-transform: translateX(-100%); /* Firefox bug fix */
 -webkit-transform: translateX(-100%); /* Firefox bug fix */
 transform: translateX(-100%); 
 }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="content">
<span id="infoLongMessage" class="scroll-left">Browser sources let you display a webpage from the internet or a local file and are commonly used for widgets and alerts</span>
</div>

Answer 1

您不需要任何js即可实现您的想法。你需要一个股票。如果需要，您还可以延迟动画。

@-webkit-keyframes ticker {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    visibility: visible;
  }
  100% {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}
@keyframes ticker {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    visibility: visible;
  }
  100% {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}
.ticker-wrap {
  position: fixed;
  top: 0;
  width: 100%;
  overflow: hidden;
  background-color: #9a1f1f;
  color: #fff;
  padding: 6px 10px;
  padding-left: 100%;
  box-sizing: content-box;
}
.ticker-wrap .ticker {
  display: inline-block;
  height: 2rem;
  line-height: 2rem;
  white-space: nowrap;
  padding-right: 100%;
  box-sizing: content-box;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-name: ticker;
  animation-name: ticker;
  -webkit-animation-duration: 30s;
  animation-duration: 30s;
}
.ticker-wrap .ticker__item {
  display: inline-block;
  padding: 0 1rem;
  font-size: 1rem;
  color: white;
}

<div class="ticker-wrap">
  <div class="ticker">
    <div class="ticker__item">Hi Lea!</div>
    <div class="ticker__item">Look at them !!!</div>
    <div class="ticker__item">Owww new items...</div>
    <div class="ticker__item">
      offers | save up to 50% — shop now
    </div>
  </div>
</div>