问题
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)...
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-Compatible" content="IE=9; IE=10; IE=11; IE=edge">
but to no avail...URG.
Why does IE have to be so difficult :/
Anyway, this is what I got, I'll provide a sample below with the code being used along with a jsFiddle to demonstrate it.
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>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 -> Using 2.1.4
Here is the FIDDLE
Any help is greatly appreciated!
UPDATE:
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?
回答1:
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 - View in IE10+ regardless of windows OS...
Frickin' IE...
来源：https://stackoverflow.com/questions/35904282/unusual-case-with-ie-and-flip-animation