Question

我要轮流突出显示（一个突出显示其他隐藏，另一个突出显示其他隐藏....循环）这是我的代码

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);

Tweenmax使trun成为亮点

1 个答案: