gpt4 book ai didi

jquery - IE 和翻转动画问题

转载 作者:行者123 更新时间:2023-11-28 06:15:03 25 4
gpt4 key购买 nike

更新:终于弄明白了 - 我提供了答案 HERE以及以下内容。

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

<罢工>

我不完全确定这里的根本原因是什么 - 我搜索了很多但没有任何帮助......很多人说使用背面可见性:隐藏;带有 -ms- 前缀,但这也不起作用。我什至尝试在我的 html 文件上使用标签,例如:

但无济于事...求助。

为什么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

我能够在 windows 7 上测试它机器和动画似乎工作...但是,在windows 10机器(使用 IE 11 ),它没有......有什么想法吗?

非常感谢任何帮助!

最佳答案

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

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

关于jquery - IE 和翻转动画问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35941996/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com