在Chrome/Safari中轉換過程中遇到CSS轉換問題,忽略其父項溢出屬性。忽略溢出的CSS不透明度轉換:隱藏在Chrome/Safari中
JS加入活性類孩子:
$('.child').addClass('active');
CSS的父/子
.parent {
position:relative;
width:250px;
height:250px;
background:#000;
border-radius:250px;
overflow:hidden;
}
.child {
opacity:0;
transition:1s opacity ease-in-out;
position:absolute;
top:50%;
left:50%;
transform:translate(-50%, -50%);
background:blue;
width:250px;
height:250px;
&.active {
opacity:1;
}
}
這裏的小提琴:https://jsfiddle.net/b3ejm7qr/1/
在過渡期間,孩子的含量顯示在其父母的外面,然後在完成時消失。
已嘗試添加背面知名度,但沒有運氣。
一直試圖找到同樣的問題,但一直沒有運氣......想知道這是Chrome/Safari中的已知問題,以及是否有修復/解決方法?
謝謝!
啊,我沒有意識到我也需要translate3d,謝謝。 –
不客氣。 – nashcheez
索引做了詭計,謝謝 –