проблема z-индекса с GreenSock - PullRequest
Новая
       10

проблема z-индекса с GreenSock

0 голосов
/ 04 мая 2018

Используя GreenSock TweenMax, я могу получить точную анимацию, но проблема в том, что «флажок», который разворачивается вправо, должен быть НАДЛЕЗНИМ, а не под ним. Установка z-index для любого из элементов не имеет никакого эффекта вообще. Есть идеи? Демоверсия CodePen находится здесь: https://codepen.io/anon/pen/xjLexJ

Вот мой JS: 

    // FLIP THE ICON
TweenLite.set(".iconWrapper", {perspective:800});
TweenLite.set(".icon", {transformStyle:"preserve-3d"});
TweenLite.set(".back", {rotationY:-180});
TweenLite.set([".back", ".front"], {backfaceVisibility:"hidden"});

$(".iconWrapper").hover(
  function() {
    TweenLite.to($(this).find(".icon"), 1.2, {rotationY:180, ease:Back.easeOut});
  },
  function() {
    TweenLite.to($(this).find(".icon"), 1.2, {rotationY:0, ease:Back.easeOut});  
  }
);

// EXTEND/RETRACT THE FLAG
$(document).ready(function() {
    $(".flag").css("width", 0);
      var tl = new TimelineLite();
    $(document).on("mouseenter", ".iconWrapper", function(evt){         
         tl.to($(this).find(".flag"), 0.25, {width:"300px"});
    }).on("mouseleave", ".iconWrapper", function(evt){        
         tl.to($(".flag"), 0.25, {width:0});
    });
});

1 Ответ

0 голосов
/ 04 мая 2018

Вам необходимо убедиться, что z-индекс элемента, над которым вы наводите курсор, выше, чем у другого (поскольку вы установили оба параметра на 10 для запуска). Вы можете сделать это несколькими способами, но вот простое изменение, чтобы показать, что оно работает : 

// EXTEND/RETRACT THE FLAG
$(document).ready(function() {
  $(".flag").css("width", 0);
  var tl = new TimelineLite();
  $(document).on("mouseenter", ".iconWrapper", function(evt) {
    $(this).css('z-index', 11); // bump z-index higher
    tl.to($(this).find(".flag"), 0.25, {
      width: "300px"
    });
  }).on("mouseleave", ".iconWrapper", function(evt) {
    $(this).css('z-index', 10); // return z-index to original value
    tl.to($(".flag"), 0.25, {
      width: 0
    });
  });
});
...