-webkit-transitionSafari で問題が発生しています。これらのトランジションは、Chrome、FF、および IE10 で正常に機能します (接頭辞なしのトランジション プロパティを使用)。
私のサイトでは、表示できるパネルが 3 つあります。メインの 1 つはデフォルトで開き、他の 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が%、役に立ちませんでした。これに関するアドバイスは大歓迎です。