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

Question

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

下面的代码，我也把它放在这里（正如我所说的在 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（或 translate）在 FF/Chrome 上不起作用，但我重新编写了我的代码以在每个垂直百叶窗的左侧位置使用过渡而不是 transform 的 translate 值。它实际上甚至更好一点 - 动画肯定更流畅。

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