GreenSock 的 z-index 问题

Question

使用 GreenSock TweenMax，我能够获得完全正确的动画，但问题是向右飞出的 "flag" 需要在下一个菱形上方，而不是在其下方。在任何元素上设置 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});
    });
});

Answer 1

您需要确保您悬停的元素的 z-index 高于另一个（因为您已将两者都设置为 10 开始）。您可以通过几种方式做到这一点，但是 here's a simple change just to show that it works:

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

GreenSock 的 z-index 问题

z-index issue with GreenSock

jquery

animation

gsap