jquery - 在 FF/Chrome 上使用 jQuery 进行矩阵转换的 CSS3 转换

Question

我编写了一个简单的小过渡动画，在页面加载时应该像打开百叶窗一样显示内容。它结合使用 css3 来设置过渡值，并使用 jQuery 将更改应用于页面加载时的转换:矩阵值。它在 Safari 中运行良好，但对于我的生活，我无法理解为什么过渡效果在 FF 或 Chrome 上不起作用。在这两种浏览器中，“盲区”只是在过渡显示后消失以显示内容，而不是像它应该的那样以四个垂直 strip 过渡。

下面的代码，我也把它放在这里(正如我所说，它在 Safari 中有效，所以你可以看到我期待的那种效果):

https://jsfiddle.net/ebenezer66/783uh6k3/

基本的 html:

<div class="home__columnShades__div">
  <div class="home__columnShades__div__column">
    <div class="home__columnShades__div__columnOne"></div>
  </div>
  <div class="home__columnShades__div__column">
    <div class="home__columnShades__div__columnTwo"></div>
  </div>
  <div class="home__columnShades__div__column">
    <div class="home__columnShades__div__columnThree"></div>
  </div>
  <div class="home__columnShades__div__column">
    <div class="home__columnShades__div__columnFour"></div>
  </div>
</div>

SCSS:

.home__columnShades__div {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  z-index: 899;
}

.home__columnShades__div__column {
  width: 25%;
  height: 100%;
  float: left;
}

.home__columnShades__div__columnOne {
  position: absolute;
  left: 0;
  height: 100%;
  width: inherit;
  background-color: #000;
  transition: transform 3s;
  transition-delay: 0.5s;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top left;
}

.home__columnShades__div__columnTwo {
  @extend .home__columnShades__div__columnOne;
  left: 25%;
}

.home__columnShades__div__columnThree {
  @extend .home__columnShades__div__columnOne;
  left: 50%;
}

.home__columnShades__div__columnFour {
  @extend .home__columnShades__div__columnOne;
  left: 75%;
}

jQuery:

  var viewWidthQuarter = $(window).width() / 4;

  $('.home__columnShades__div__columnOne').css({
    'transform': 'matrix(0, 0, 0, 1, -' + viewWidthQuarter / 1.5 + ', 0)'
  });
  $('.home__columnShades__div__columnTwo').css({
    'background-position': '-' + viewWidthQuarter + 'px' + ' 0',
    'transform': 'matrix(0, 0, 0, 1, -' + viewWidthQuarter / 1.5 + ', 0)'
  });
  $('.home__columnShades__div__columnThree').css({
    'background-position': '-' + viewWidthQuarter * 2 + 'px' + ' 0',
    'transform': 'matrix(0, 0, 0, 1, -' + viewWidthQuarter / 1.5 + ', 0)'
  });
  $('.home__columnShades__div__columnFour').css({
    'background-position': '-' + viewWidthQuarter * 3 + 'px' + ' 0',
    'transform': 'matrix(0, 0, 0, 1, -' + viewWidthQuarter / 1.5 + ', 0)'
  });

Answer 1

虽然我还没有解决为什么 transform: matrix(或翻译)在 FF/Chrome 上不起作用，但我重新编写了我的代码以在每个垂直百叶窗的左侧位置使用过渡而不是变换的翻译值。它实际上什至效果更好 - 动画绝对更流畅。

https://jsfiddle.net/ebenezer66/ttgp8bj4/

更新的 jQuery:

  var viewWidth = $(window).width(),
  viewWidthQuarter = viewWidth / 4;

  $('.home__columnShades__div__columnOne').css({
    'left': viewWidth-(viewWidthQuarter*4.5) + 'px',
    'transform': 'scaleX(0)'
  });
  $('.home__columnShades__div__columnTwo').css({
    'background-position': '-' + viewWidthQuarter + 'px' + ' 0',
    'left': viewWidth-(viewWidthQuarter*3.5) + 'px',
    'transform': 'scaleX(0)'
  });
  $('.home__columnShades__div__columnThree').css({
    'background-position': '-' + viewWidthQuarter * 2 + 'px' + ' 0',
    'left': viewWidth-(viewWidthQuarter*2.5) + 'px',
    'transform': 'scaleX(0)'
  });
  $('.home__columnShades__div__columnFour').css({
    'background-position': '-' + viewWidthQuarter * 3 + 'px' + ' 0',
    'left': viewWidth-(viewWidthQuarter*1.5) + 'px',
    'transform': 'scaleX(0)'
  });

更新的 CSS:

.home__columnShades__div {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  z-index: 899;
}

.home__columnShades__div__column {
  width: 25%;
  height: 100%;
  float: left;
}

.home__columnShades__div__columnOne {
  position: absolute;
  left: 0;
  height: 100%;
  width: inherit;
  background-color: #000;
  transition: transform 3s, left 3s;
  transition-delay: 0.5s;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top left;
}

.home__columnShades__div__columnTwo {
  @extend .home__columnShades__div__columnOne;
  left: 25%;
}

.home__columnShades__div__columnThree {
  @extend .home__columnShades__div__columnOne;
  left: 50%;
}

.home__columnShades__div__columnFour {
  @extend .home__columnShades__div__columnOne;
  left: 75%;
}