不寻常的case与IE和翻转动画 [英] Unusual case with IE and flip animation

问题描述

我有一个不寻常的情况下，我的翻转动画不工作在IE（去图） - 但是，它可以在所有其他浏览器（Chrome，FF，Opera，Edge和Safari）...

I have an unusual case where my flip animation does not work in IE (go figure) - however, it does work across all other browsers (Chrome, FF, Opera, Edge, and Safari)...

我不完全确定原因的根源在这里 - 我搜索了一吨，但没有帮助...很多人说使用 -face - 前缀，但是这也没有工作，c> backface-visibility：hidden; 我甚至尝试在我的HTML文件上使用< meta> 标签，例如：

I'm not entirely sure what the root of the cause is here - I've searched a ton but nothing helped...A lot of people said to use the backface-visibility: hidden; with the -ms- prefix but that too did not work. I even tried using a <meta> tag on my html file such as:

< meta http-equiv =X-UA-Compatiblecontent =IE = 9; IE = 10; IE = 11; IE = edge>

但无效... URG。

but to no avail...URG.

为什么IE必须这么难：/

Why does IE have to be so difficult :/

无论如何，这是我得到的，我将在下面提供一个示例代码和一个jsFiddle一起使用来演示它。

Anyway, this is what I got, I'll provide a sample below with the code being used along with a jsFiddle to demonstrate it.

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

PLEASE CHECK FIDDLE USING INTERNET EXPLORER and then compare using Chrome or a different browser.

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>[e-mail]</p>
        <p>[phone]</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

jQuery -> Using 2.1.4

以下是 FIDDLE

任何帮助非常感谢！

更新：

这在Windows7机器和动画似乎工作...但是，在Windows10机器（使用IE11），它不...任何想法？

So, I was able to test this on a windows7 machine and the animation seems to work...However, on a windows10 machine (using IE11), it doesn't...Any ideas?

推荐答案

最后想出来 - 这不是最好的解决方案，因为它似乎粘贴一点，当翻转动画发生 - 但它 IS 比它之前显示它没有显示动画 - 而是在此修复之前，它只是显示前面，然后消失点击按钮，然后重新出现在背面...所以我会说，这是一个改进至少现在我们看到实际的翻转动画发生了。

Finally figured it out - It's not the best solution as it seems to stick a bit when the flip animation occurs - but it IS better than how it was displaying before which didn't show the animation at all - instead prior to this fix, it just showed the front side, then disappeared on click of button, and then reappeared on the back side...So I'd say that this is an improvement where at least now we see the actual flip animation take place.

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操作系统...

DEMO - View in IE10+ regardless of windows OS...

Frickin' ..

Frickin' IE...

这篇关于不寻常的case与IE和翻转动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！