Question

我写了一个简单的小过渡动画，在页面加载时应该显示内容有点像窗帘的开口。它使用css3的组合来设置转换值，并使用jQuery对页面加载时的transform：matrix值应用更改。它在Safari中运行良好，但对于我的生活，我无法理解为什么过渡效果不适用于FF或Chrome。在这两种浏览器中，＆＃39;盲人＆＃39;只是消失以显示转换显示后的内容，而不是按原样在四个垂直条中过渡。

下面的代码，我也说这是一个小提琴（正如我在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

虽然我还没有解决为什么变换：矩阵（或翻译）不适用于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%;
}

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

1 个答案: