IE 和翻转动画的异常情况

Question

我有一个不寻常的情况，我的翻转动画在 IE 中不起作用（请看图）- 但是，它在所有其他浏览器（Chrome、FF、Opera、Edge 和 Safari）中都起作用。 ..

我不完全确定原因的根源在这里 - 我搜索了很多但没有任何帮助......很多人说使用 backface-visibility: hidden; 和 -ms- 前缀，但这也不起作用。我什至尝试在 html 文件上使用 <meta> 标签，例如：

<meta http-equiv="X-UA-Compatible" content="IE=9; IE=10; IE=11; IE=edge">

但是没有用...求助。

为什么IE要这么难:/

无论如何，这就是我得到的，我将在下面提供一个示例，其中包含正在使用的代码以及一个 jsFiddle 来演示它。

请使用 INTERNET EXPLORER 检查 FIDDLE，然后使用 Chrome 或其他浏览器进行比较。

html:

<div class="resume_contact_info_wrapper">
  <div class="resume_contact_info">
    <div class="front">
      <div class="resume_abbr">
        <p>Email |</p>
        <p>Phone |</p>
        <p>Located |</p>
        <p>Website |</p>
      </div>
      <div class="resume_abbr_info">
        <p>email@example.com</p>
        <p>(550)555-5555</p>
        <p>Some State</p>
        <p><a href="#">Example.com</a></p>
      </div>
      <div class="resume_hire">
        <a href="#">View Portfolio</a>
        <a href="#">View as PDF</a>
        <p>→   Check Availability   ←</p>
      </div>
    </div>
    <div class="back">
      <div class="schedule">
        <p>Availability Calendar 2016</p>
      </div>
      <div class="resume_abbr">
        <p>Jan |</p>
        <p>Feb |</p>
        <p>Mar |</p>
        <p>Apr |</p>
        <p>May |</p>
        <p>Jun |</p>
        <p>Jul |</p>
        <p>Aug |</p>
        <p>Sep |</p>
        <p>Oct |</p>
        <p>Nov |</p>
        <p>Dec |</p>
      </div>
      <div class="resume_abbr_info">
        <p>Expired</p>
        <p>Expired</p>
        <p class="unavailable">Unavailable</p>
        <p class="unavailable">Unavailable</p>
        <p class="unavailable">Unavailable</p>
        <p class="available">Available</p>
        <p class="available">Available</p>
        <p class="available">Available</p>
        <p class="available">Available</p>
        <p class="available">Available</p>
        <p class="available">Available</p>
        <p class="available">Available</p>
      </div>
      <div class="resume_hire">
        <p>→   Flip Back   ←</p>
      </div>
    </div>
  </div>
</div>

css:

*,
*:before,
*:after {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.resume_contact_info_wrapper {
  width: 35%;
  min-height: 168px;
  padding: 0;
  margin: 0;
  float: left;
  transition: all 0.2s;
  perspective: 800px;
}

.resume_contact_info {
  width: 100%;
  padding: 0;
  margin: 0;
  float: left;
}

.front,
.back {
  width: 100%;
  padding: 0 0 10px 0;
  margin: 0;
  background: #DDD;
  box-shadow: inset 0 1px #FFF, 0 -1px #000, 0 1px #D1D1D1, -1px 0 #000, 1px 0 #C5C5C5;
  border: 5px solid rgba(0, 0, 0, 0.7);
  border-radius: 3px;
  backface-visibility: hidden;
  transition: all 0.4s;
  transform-style: preserve-3d;
  position: absolute;
  top: 0;
}

.back {
  transform: rotateY(-180deg);
}

.flipped .back {
  transform: rotateY(0deg);
}

.flipped .front {
  transform: rotateY(180deg);
}

.resume_abbr {
  width: 35%;
  padding: 0;
  margin: 0;
  float: left;
}

.resume_abbr p {
  width: 100%;
  padding: 0;
  margin: 0;
  float: left;
  color: #666;
  font-size: .9em;
  font-weight: bold;
  text-align: right;
  text-shadow: 1px 1px #F1F1F1;
  cursor: default;
}

.resume_abbr p:first-child {
  padding: 10px 0 0 0;
}

.resume_abbr_info {
  width: 65%;
  padding: 0;
  margin: 0;
  float: left;
}

.resume_abbr_info p {
  width: 100%;
  padding: 0 0 0 5px;
  margin: 0;
  float: left;
  color: #777;
  font-size: .9em;
  text-shadow: 1px 1px #F1F1F1;
  cursor: default;
}

.resume_abbr_info p:first-child {
  padding: 10px 0 0 5px;
}

.resume_abbr_info p.available {
  color: #27AE60;
}

.resume_abbr_info p.unavailable {
  color: #C0392B;
}

.resume_abbr_info p a {
  float: none;
  color: #28F;
}

.resume_abbr_info p a:hover {
  text-decoration: underline;
}

.schedule {
  width: 100%;
  padding: 0;
  margin: 10px 0 0 0;
  float: left;
}

.schedule p {
  width: 100%;
  padding: 0;
  margin: 0;
  float: left;
  font-size: .9em;
  font-weight: bold;
  text-align: center;
  text-shadow: 1px 1px #F1F1F1;
}

.resume_hire {
  width: calc(100% - 20px);
  padding: 0;
  margin: 0 10px;
  float: left;
}

.resume_hire a {
  width: calc(50% - 5px);
  padding: 5px 0;
  margin: 12px 5px 0 0;
  border: 1px solid #28F;
  float: left;
  color: #28F;
  font-size: .75em;
  font-weight: bold;
  text-align: center;
  text-shadow: 1px 1px #F1F1F1;
}

.resume_hire a:last-of-type {
  margin: 12px 0 0 5px;
}

.resume_hire a:hover {
  background: #28F;
  box-shadow: inset 0 1px #459CFF;
  color: #DDD;
  text-shadow: -1px -1px rgba(0, 0, 0, 0.3);
}

.resume_hire p {
  width: 100%;
  padding: 5px 0;
  margin: 8px 0 0 0;
  background: #C0392B;
  box-shadow: inset 0 1px #E74C3C;
  border: 1px solid #C0392B;
  float: left;
  color: #DDD;
  font-size: .75em;
  font-weight: bold;
  text-align: center;
  text-shadow: -1px -1px rgba(0, 0, 0, 0.3);
  text-transform: uppercase;
  cursor: pointer;
}

.resume_hire p:hover {
  background: #E74C3C;
  box-shadow: inset 0 1px #FF5441;
  border: 1px solid #E74C3C;
}

js:

/*!
 *  Author: Michael R. Draemel
 *                  http://draemel.com/
 */
$('.resume_hire p').click(function() {
  $('.resume_contact_info').toggleClass('flipped');
});

jQuery -> 使用 2.1.4

这是FIDDLE

非常感谢任何帮助！

更新：

因此，我能够在 windows7 机器上对此进行测试，并且动画似乎可以工作...但是，在 windows10 机器（使用 IE11）上，它不起作用。 ..有什么想法吗？

Answer 1

终于弄明白了 - 这不是最好的解决方案，因为它似乎在翻转动画出现时有点卡住 - 但它 IS 比之前显示的更好根本不显示动画 - 而不是在此修复之前，它只显示正面，然后在单击按钮时消失，然后重新出现在背面......所以我想说这是一个改进至少现在我们看到了实际的翻转动画。

CSS:

.resume_contact_info_wrapper {
  width: 25%;
  min-height: 168px;
  padding: 0;
  margin: 0;
  float: left;
  transition: all 0.2s;
  perspective: 800px;
    /* IE fix - Without this, flip animation is not seen */
    -ms-transform: perspective(800px) rotateY(0);
}

DEMO - 在 IE10+ 中查看而不考虑 windows OS...

该死的 IE...

IE 和翻转动画的异常情况

Unusual case with IE and flip animation

html

css

jquery

internet-explorer-11

windows-10