Tweenmax在trun中突出显示

Question

我想轮流突出显示（一个突出显示其他人隐藏，另一个突出显示，其他隐藏.... cyecling）这些是我的代码

HTML：

<div id="lens_flare">
   <div id="lens_flare0" class="test"></div>
   <div id="lens_flare1" class="lens_flare test"></div>
   <div id="lens_flare2" class="lens_flare test"></div>
   <div id="lens_flare3" class="lens_flare test"></div>
  <div id="lens_flare4" class="lens_flare test"></div>
  <div id="lens_flare5" class="lens_flare test"></div>
  <div id="lens_flare6" class="lens_flare"></div>
</div>

CSS：

 body{ 
   margin:20px;
 }

#lens_flare{
  position:relative;
  display: flex;
}

.test {
  width: 100px;
  height: 100px;
  opacity: 0
}

#lens_flare .lens_flare {
/*   position:absolute;
  top:0;
  left:0; */
  width:100px;
  height:100px;
  opacity: 0;
}

.lens_flare {
   width:100px;
   height:100px;
   background:#CC0000;
 }

#lens_flare0 {
   background:black;
   z-index:1;
 }

#lens_flare1 {
   background:#CC0000;
   z-index:1;
 }

#lens_flare2 {
   background:#40A1F7;  
   z-index:2;
 }

#lens_flare3 {
   background:#0C8714;  
   z-index:3;
 }

#lens_flare4 {
   background:purple;  
   z-index:3;
 }

#lens_flare3 {
   background:pink;  
   z-index:3;
 }
#lens_flare6 {
   background:black;  
   z-index:3;
 }

JS：

 var tl = new TimelineMax({repeat: 100, yoyo:false});
var t2 = new TimelineMax({repeat: 100, yoyo:false});

t2.staggerTo(".test", 1.5,
    {opacity:0}
 , 1.5);

tl.staggerTo(".lens_flare", 1.5,
    {opacity:1}
 , 1.5);

它只在第一次运行时才成功。我还应该做什么来反过来总是突出？

（堆栈要求我添加更多细节，但我已经告诉它了，所以在这里添加更多虚拟单词堆栈要求我添加更多细节，但我告诉它，所以在这里添加更多虚拟单词堆栈要求我添加更多细节但我告诉它，所以在这里添加更多的虚拟单词堆栈要求我添加更多细节，但我告诉它，所以在这里添加更多虚拟单词堆栈要求我添加更多细节，但我告诉它，所以在这里添加更多虚拟单词堆栈要求我添加更多细节，但我告诉它，所以在这里添加更多的虚拟单词）

Answer 1

只需要进行简单的更改，重复从100到-1，这将使其无限次运行。

var tl = new TimelineMax({repeat: -1, yoyo:false});
var t2 = new TimelineMax({repeat: -1, yoyo:false});

t2.staggerTo(".test", 1.5,
    {opacity:0}
 , 1.5);

tl.staggerTo(".lens_flare", 1.5,
    {opacity:1}
 , 1.5);