Question

我有以下小提琴：http://jsfiddle.net/mauricederegt/hy2dvL1u/43/

当您在Chrome中打开它并单击该卡时，它将翻转并向右移动。在Chrome浏览器中看起来不错，但是当我在Safari（v9）中执行此操作时，动画有点糟糕（它有剪辑等，点击更快可以更好地看到混乱）

CSS的一部分（请参阅整个小提琴）：

/* entire container, keeps perspective */
.flip-container {
    perspective: 1000;
    transform-style: preserve-3d;
}
    /*  UPDATED! flip the pane when .flipped class applied */
    .flip-container.flipped .back {
        transform: rotateY(0deg);
    }
    .flip-container.flipped .front {
        transform: rotateY(180deg);
    }

.flip-container, .front, .back {
    width: 7.1428rem;
    height: 10rem;
}

/* flip speed goes here */
.flipper {
    transition: 200ms;
    transform-style: preserve-3d;

    position: relative;
}

我错过了什么？为什么Safari中的翻转动画如此糟糕？

亲切的问候，

PS。我不使用-webkit-前缀，因为它不再需要了

Answer 1

试试吧

  "frameworks": {
    "netcoreapp1.0": {
      "imports": [
        "dnxcore50",
        "portable-net45+win8"
      ]
    }
  },

翻转动画在Chrome中可以正常工作，但在Safari中无效

1 个答案: