看看http://gull.calvin-evans.mixture.io/
当您单击其中一个棕色大矩形时,jQuery 会应用一类“dropped”,它会更改顶部位置。这在最新版本的 FF 中根本不会像在大多数其他浏览器中那样转换,我不知道为什么。当我使用浏览器内调试器并在标记中手动添加类时,它会发生血腥的转换!太奇怪了。如果有人对此有任何想法,将不胜感激。
这是我的CSS(更少)记录:
.card {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
-webkit-transition: 0.6s top 0;
-moz-transition: 0.6s top 0;
-o-transition: 0.6s top 0;
-ms-transition: 0.6s top 0;
transition: 0.6s top 0;
img {
width: 100%;
}
&.one {
z-index: 4;
background: @brown1;
background-size:100% auto;
top: 0%;
&.dropped {
top: 90%;
}
}
&.two {
z-index: 3;
background: @brown2;
top: 0;
&.dropped {
top: 85%;
}
}
&.three {
z-index: 2;
background: @brown3;
top: 0;
&.dropped {
top: 80%;
}
}
}