Tweenmax делает подсветку в багажнике - PullRequest
Новая
       25

Tweenmax делает подсветку в багажнике

0 голосов
/ 11 сентября 2018

Я хочу сделать выделение по очереди (одно выделение другим скрыть, а другое выделение другим скрыть .... 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);

только при первом запуске.Что еще я должен сделать, чтобы сделать подсветку по очереди всегда ??

(стек просит меня добавить больше деталей, но я сказал это, поэтому добавьте больше пустых слов, здесь стек просит меня добавить больше деталей, но я сказалэто, так что добавьте больше пустых слов здесь стек просит меня добавить больше деталей, но я сказал это, поэтому добавьте больше пустых слов здесь стек просит меня добавить больше деталей, но я сказал это, так что добавьте больше пустых слов здесь стек просит менядобавьте больше деталей, но я сказал это, поэтому добавьте больше пустых слов, здесь стек просит меня добавить больше деталей, но я сказал это, поэтому добавьте больше пустых слов здесь)

1 Ответ

0 голосов
/ 13 сентября 2018

Требуется всего лишь простое изменение, сделайте повторение от 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);
...