容器无法在Safari

Question

今天我注意到了Safari（9.0）的奇怪行为，当我将一个转换应用到一个在X轴上平移而宽度也在增加的元素时。

我已在此JsFiddle中重现了此行为。这是一个嵌入代码，适合那些喜欢它的人。在Firefox和Chrome中，它看起来非常流畅但不在Safari中，是否有人有解决方案或达到相同效果的最佳方式？

＆＃13;

＆＃13;

var button = document.getElementsByTagName('button')[0],
	container = document.getElementsByTagName('div')[0];
    
button.addEventListener('click', function() { container.classList.toggle('open'); });

＆＃13;

.container {
  width: 100%;
  overflow: hidden;
}
ul {
  display: block;
  width: 100%;
  padding: 0;
  margin: 0;
  transition: width 1s, transform 1s;
}
.open ul {
  width: 200%;
  transform: translateX(-50%);
}
li {
  /* Just some style first */
  font-family: sans-serif;
  color: #fff;
  text-align: center;
  text-transform: uppercase;
  background-color: red;
  padding: 1em 0;
  
  display: inline-block;
  width: calc(50% - 4px);
}
li:first-child {
  background-color: green;
}

＆＃13;

<div class="container">
  <ul>
    <li>Test</li>
    <li>Test</li>
  </ul>
</div>
<button type="button">Toggle translation</button>

＆＃13;

＆＃13;

＆＃13;

Answer 1

通过动画margin-left代替translateX，结果在Safari中可以接受：

＆＃13;

＆＃13;

var button = document.getElementsByTagName('button')[0],
		container = document.getElementsByTagName('div')[0];
    
button.addEventListener('click', function() {
	container.classList.toggle('open');
});

＆＃13;

.container {
	width: 100%;
  overflow: hidden;
}
ul {
  display: block;
  width: 100%;
  padding: 0;
  margin: 0;
  transition: width 1s, margin-left 1s;
}
.open ul {
  width: 200%;
  margin-left:-100%;
}
li {
  font-family: sans-serif;
  color: #fff;
  text-align: center;
  text-transform: uppercase;
  background-color: red;
  
	display: inline-block;
  padding: 1em 0;
  width: calc(50% - 4px);
}
li:first-child {
	background-color: green;
}

＆＃13;

<div class="container">
  <ul>
    <li>Test</li>
    <li>Test</li>
  </ul>
</div>
<button type="button">Toggle translation</button>

＆＃13;

＆＃13;

＆＃13;

使用scaleX代替动画width更加顺畅，但可能不是您想要的。

＆＃13;

＆＃13;

var button = document.getElementsByTagName('button')[0],
		container = document.getElementsByTagName('div')[0];
    
button.addEventListener('click', function() {
	container.classList.toggle('open');
});

＆＃13;

.container {
	width: 100%;
  overflow: hidden;
}
ul {
  display: block;
	width: 100%;
  padding: 0;
  margin: 0;
  transition: transform 1s;
}
.open ul {
  transform: translateX(-50%) scaleX(2);
}
li {
  font-family: sans-serif;
  color: #fff;
  text-align: center;
  text-transform: uppercase;
  background-color: red;
  
	display: inline-block;
  padding: 1em 0;
  width: calc(50% - 4px);
}
li:first-child {
	background-color: green;
}

＆＃13;

<div class="container">
  <ul>
    <li>Test</li>
    <li>Test</li>
  </ul>
</div>
<button type="button">Toggle translation</button>

＆＃13;

＆＃13;

＆＃13;

Answer 2

重新发布作为答案。

Here 是jsFiddle结果和摘录，如下所示：

＆＃13;

＆＃13;

var button = document.getElementsByTagName('button')[0];
var container = document.getElementsByTagName('div')[0];
var timeline = new TimelineMax({ paused: true });
timeline.to('ul', 1, { width: '200%', xPercent: -50, ease: Power2.easeInOut });

button.addEventListener('click', function() {
	timeline.progress() > 0 ? timeline.reverse() : timeline.play();
});

＆＃13;

.container {
	width: 100%;
  overflow: hidden;
}
ul {
  display: block;
	width: 100%;
  padding: 0;
  margin: 0;
}
li {
  font-family: sans-serif;
  color: #fff;
  text-align: center;
  text-transform: uppercase;
  background-color: red;
	display: inline-block;
  padding: 1em 0;
  width: calc(50% - 4px);
}
li:first-child {
	background-color: green;
}

＆＃13;

<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.18.2/TweenMax.min.js"></script>
<div class="container">
  <ul>
    <li>Test</li>
    <li>Test</li>
  </ul>
</div>
<button type="button">Toggle translation</button>

＆＃13;

＆＃13;

＆＃13;

希望这有用。

P.S。我一直在使用GSAP已经有一段时间了，我不记得遇到任何特定于浏览器的问题，除非浏览器会采取不同的做法。对GSAP的一点研究，它会告诉你浏览器兼容性是他们的主要卖点之一。

Answer 3

因此，我将尝试总结这里的两个最佳解决方案：一个使用CSS转换，另一个使用Javascript动画（GSAP）。

CSS TRANSFORM

在性能方面，建议仅对变换（平移，缩放，旋转）和不透明度进行动画处理。如果您对更多优化详情感兴趣，可以have a look at this article by Anna Migas。

因此，正如@Meiko建议的那样，最好的解决方案是仅对比例和转换属性进行动画处理。这是一个代码示例（and the JSFiddle）

var button = document.getElementsByTagName('button')[0],
  container = document.getElementsByTagName('div')[0];

button.addEventListener('click', function() {
  container.classList.toggle('open');
})

.container,
ul {
  width: 100%;
}

ul {
  overflow: hidden;
  
  /* reset default browser styles */
  padding: 0;
  margin: 0;
}

li {
  display: inline-block;
  width: calc(50% - 2px);
  position: relative;
  transition: transform 1s;
  
  /* Just some style */
  font-family: sans-serif;
  color: #fff;
  text-align: center;
  text-transform: uppercase;
  padding: 1em 0;
}
li::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  background-color: red;
  z-index: -1;
  transition: transform 1s;
}

li:first-child::before {
  background-color: green;
}

.open li:first-child {
  transform: translateX(-100%);
}

.open li:nth-of-type(2) {
  transform: translateX(-50%);
}

.open li:nth-of-type(2)::before {
  transform: scaleX(2);
}

<div class="container">
  <ul>
    <li>Test</li>
    <li>Test</li>
  </ul>
</div>
<button type="button">Toggle translation</button>

<强>优点：

• 只使用一小部分Javascript来切换课程，
• 浏览器支持非常好（需要特定于供应商的属性和一些测试），
• GPU内存非常快速和轻便。

<强> CONS：

• 在使用方面非常有限（第二个单元格的实际宽度保持不变），
• 需要更多的CSS。

JS动画（使用GSAP）

@Tahir Ahmed建议使用此解决方案并使用GSAP library。作为旁注，我真的认为这是这种动画中最好的js库。以下是其工作原理的摘录（and the JSFiddle）：

var button = document.getElementsByTagName('button')[0],
  timeline = new TimelineMax({ paused: true });
  
timeline.to('ul', 1, { width: '200%', xPercent: -50 });

button.addEventListener('click', function() {
  timeline.progress() > 0 ? timeline.reverse() : timeline.play();
})

.container {
  width: 100%;
  overflow: hidden;
}

ul {
  width: 100%;
  
  /* reset default browser styles */
  padding: 0;
  margin: 0;
}

li {
  display: inline-block;
  width: calc(50% - 2px);
  background-color: red;
  
  /* Just some style */
  font-family: sans-serif;
  color: #fff;
  text-align: center;
  text-transform: uppercase;
  padding: 1em 0;
}

li:first-child {
  background-color: green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.2/TweenMax.min.js"></script>

<div class="container">
  <ul>
    <li>Test</li>
    <li>Test</li>
  </ul>
</div>
<button type="button">Toggle translation</button>

<强>优点：

• 非常灵活，天空是极限！
• 您可以为display（您不能在CSS中），
等属性设置动画
• 与所有浏览器兼容（下至IE6）。

<强> CONS：

• 需要第三方库（约30kb），
• 看起来GPU有点难度（虽然需要更多测试才能确定）。

最后它真的取决于你需要的动画，但如果它比移动容器更复杂一点，那么我会选择GSAP。