Question

我一直在寻找这种解决方案，但找不到适合我的问题的解决方案。

我有这段代码来生成淡入淡出，并将Y转换为项目中多个元素的顶部（有时在同一页面上使用不同的div）。

var controller = new ScrollMagic.Controller();

// loop through all elements
$('.fadein-up').each(function() {

  // build a tween
  var tween = TweenMax.from($(this), 0.3, {autoAlpha: 0, y: '+=50', ease:Linear.easeNone});

  // build a scene
  var scene = new ScrollMagic.Scene({
    triggerElement: this
  })
  .setTween(tween) // trigger a TweenMax.to tween
  .reverse(false)
  .addTo(controller);

});

但是显然它应用了属性转换：matrix（1、0、0、1、0、50）;到我的元素上，这会导致我的元素上的图层层次不佳（z-index视觉效果很差），并且由于设计将元素分层，因此我确实需要对其进行修复，以将动画元素保持在正确的水平。有什么方法可以隔离动画以仅获取Y轴而不应用此矩阵吗？

这是我的转换问题：矩阵：图像必须在文本框上方的图层中。 我试图在两个项目中都强制使用z-index，但是它也不起作用。

enter image description here

我试图更改此行：

var tween = TweenMax.from($(this), 0.3, {autoAlpha: 0, y: '+=50', ease:Linear.easeNone});

类似于：

var tween = TweenMax.from($(this), 0.3, {y: '+50'}, {autoAlpha: 0, ease:Linear.easeNone});

此更改使我的元素运动异常并起作用，但是不透明度停止起作用。还尝试了其他组合，但仍未获得理想的效果。

gsock Tweenmax的Z索引问题-矩阵参数

0 个答案: