我在Safari中遇到-webkit-transition
问题。这些转换在Chrome,FF和IE10中运行良好(使用非前缀转换属性)。
在我的网站中,有3个面板可供查看。主窗口默认打开,另外2个窗口右侧折叠显示其内容的条子。单击折叠面板时,会通过JS向其添加另一个类,并将其转换为100%宽度。
CSS:
.panel-1{
width: 100%;
}
.panel-2{
width: 8rem;
position: absolute;
top: 0;
right: 0;
overflow: hidden;
z-index: 500;
transition: all 0.5s;
-webkit-transition: all 0.5s;
}
.panel-2:hover{
width: 10rem;
}
.panel-2.panel-open{
width: 100%;
}
.panel-3{
width: 4rem;
position: absolute;
top: 0;
right: 0;
overflow: hidden;
z-index: 501;
transition: all 0.5s;
-webkit-transition: all 0.5s;
}
.panel-3:hover{
width: 6rem;
}
.panel-3.panel-open{
width: 100%;
}
问题似乎与测量单位的差异有关。悬停过渡按预期工作(rem
到rem
),但“面板打开”上的宽度过渡(rem
到%
)会跳过过渡并快速打开。如果我将默认宽度切换为百分比而不是rem
,则转换将再次起作用。我不能这样做,因为它是一个流体站点,面板折叠宽度需要是静态的而不是相对的。
我试图在min-width
中添加%
,但这没有帮助。对此有任何建议将不胜感激。
答案 0 :(得分:2)
width
上的转换是个问题。试试max-width
。
答案 1 :(得分:0)
根据我的经验,转换width
是个问题。您可以将其转换为使用left
和right
值,而不是使用宽度。 width: 20%;
与left: 80%; right: 0;
相同,width: 50%;
为left: 25%; right: 25%;
。这是一个codepen https://codepen.io/anon/pen/JWaJzN
document.getElementById("wrapper").addEventListener("click", function(){
if (this.classList.contains('center')) {
this.classList.remove('center');
}
else {
this.classList.add('center');
}
});

.container {
width: 550px;
height: 250px;
position: relative;
background-color: teal;
}
#wrapper {
height: 20%;
top: 0;
right: 0;
left: 80%;
position: absolute;
transform-origin: top left;
transition: all 1s ease;
}
#wrapper.center {
top: 50%;
left: 25%;
right: 25%;
transform: translateY(-50%);
}
#card {
width: 100%;
height: 100%;
position: relative;
transition: all 1s ease;
}
h3 {
margin: 0;
display: block;
position: absolute;
width: 100%;
height: 100%;
background: red;
}

<section class="container">
<div id="wrapper">
<div id="card">
<h3>click here</h3>
</div>
</div>
</section>
&#13;