Ошибка Z-индекса с помощью gsock Tweenmax - параметры матрицы - PullRequest
Новая
       100

Ошибка Z-индекса с помощью gsock Tweenmax - параметры матрицы

0 голосов
/ 19 октября 2018

Я искал это решение и не могу найти подходящее для моей проблемы.

У меня есть этот код, чтобы сгенерировать переход с 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-индекса) на моих элементах, и так как дизайн имеет многоуровневые элементы, мне действительно нужно это исправить, чтобы сохранить анимированный элемент на правильном уровне.Есть ли способ изолировать анимацию, чтобы получить только ось Y и не применять эту матрицу?

Вот проблема, с которой я столкнулся при преобразовании: matrix: изображение должно быть в слое над текстовым полем, Я пытался заставить z-индекс в обоих пунктах, но он тоже не работает.

введите описание изображения здесь

Я пыталсячтобы изменить эту строку: 

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

Это изменение заставило мой элемент иметь желаемое движение и сработало, но прозрачность перестала работать.Другие комбинации также были опробованы, но все еще не получили желаемого эффекта.

...