javascript - CSS3 动画 Buggy/Blinky

Question

所以我在这个网站上工作:http://superfy.me我在路由之间有 CSS3 转换(目前仅适用于 Chrome)。基本上为了执行动画，我执行以下操作:

1. 添加 .preanimate 类，该类将逐步退出的 div 旋转到 rotateY(0deg) 并将 div 中的阶段旋转到 rotateY(180deg)
2. 我添加了 .animate 类，它添加了 -webkit-transition: -webkit-transform 0.5s;
3. 我删除了删除旋转变换的 .preanimate 类

这是CSS:

#container,
 #animate-container {
   position: absolute;
   top: 70px;
   width: 100%;
   height: 100%;
   -webkit-transform-style: preserve-3d;
   -webkit-backface-visibility: hidden;
 }

#animate-container.preanimate,
#container {
  -webkit-transform: rotateY(0deg);
}
#animate-container {
  -webkit-transform: rotateY(-180deg);
}

.animate {
  -webkit-transition: -webkit-transform 0.5s;
}

#container.preanimate {
  -webkit-transform: rotateY(180deg);
}

#animate-container div,
#container div {
  -webkit-backface-visibility: hidden;
  -webkit-transform:translate3d(0,0,0);
}

所以我遇到了以下问题:

1. 一些 div 内容闪烁一串或直到结束才可见
2. 旋转 View 一段时间后，div 中的相位停止工作

Answer 1

在 3D 中移动共面物体时，这是一个常见问题。

设置:

.row {
    -webkit-transform: translateZ(1px);
}

它使行位于父级之上，并解决了问题

顺便说一句，很酷的页面!