Safari中的CSS3過渡不流暢
[英]css3 transition is not smooth in safari
問題描述
我正在重建其他人的CSS3過渡，以使其可以在Safari，Chrome和Firefox中使用。 在其版本中 （將鼠標懸停在包圖像上），該過渡在Safari中效果很好，但在另兩個版本中卻沒有：元素卡在“向上”位置。 在我的版本中 ，過渡在FF和Chrome中可以順利運行，但在Safari中則比較不穩定（而且它不會旋轉）。 有任何想法嗎？ 我的CSS在下面。
.package-down {
display: block;
position: relative;
height: 100%;
float: left;
width: 33.333%;
margin: 0 0 0 0;
transform: rotate(0deg) ;
-webkit-transition: margin .1s ease, transform .25s ease;
-moz-transition: margin .1s ease, transform .25s ease;
-o-transition: margin .1s ease, transform .25s ease;
transition: margin .1s ease, transform .25s ease;
}
.package-up {
display: block;
position: relative;
height: 100%;
float: left;
width: 33.333%;
margin: -50px 0 0 0;
transform: rotate(-2deg);
-webkit-transition: margin .1s ease, transform .25s ease-out;
-moz-transition: margin .1s ease, transform .25s ease-out;
-o-transition: margin .1s ease, transform .25s ease-out;
transition: margin .1s ease, transform .25s ease-out;
}
3 個解決方案
解決方案1
1 2015-06-02 20:16:53
盡管我同意jQuery對於此問題不是必需的，但真正的問題似乎是瀏覽器前綴的使用不一致。
您需要為transform: rotate()添加前綴transform: rotate() .package-down和.package-up上的rotation transform: rotate() 。
還有這個：
-webkit-transition: margin .1s ease, transform .25s ease-out;
應該是這樣的：
-webkit-transition: margin .1s ease, -webkit-transform .25s ease-out;
對於所有其他帶前綴的過渡屬性，這將是類似的調整。
$(function() { $('.package-down').hover(function() { $('.package-down').toggleClass('package-up'); }); });
img { margin: 0; max-width: 100%; } .main-packages-wrapper { position: relative; width: 80%; min-height: 575px; display: block; padding-top: 80px; z-index: 1; } .package.original { margin-right: -15px; margin-left: -15px; z-index: 2; } .package.original img { -webkit-transform: scale(1.2); -moz-transform: scale(1.2); -ms-transform: scale(1.2); -o-transform: scale(1.2); transform: scale(1.2); } .package-down { display: block; position: relative; height: 100%; float: left; width: 33.333%; margin: 0 0 0 0; -webkit-transform: rotate(0deg) ; -moz-transform: rotate(0deg) ; -o-transform: rotate(0deg) ; transform: rotate(0deg) ; -webkit-transition: margin .1s ease, -webkit-transform .25s ease; -moz-transition: margin .1s ease, -moz-transform .25s ease; -o-transition: margin .1s ease, -o-transform .25s ease; transition: margin .1s ease, transform .25s ease; } .package-up { display: block; position: relative; height: 100%; float: left; width: 33.333%; margin: -50px 0 0 0; -webkit-transform: rotate(-2deg); -moz-transform: rotate(-2deg); -o-transform: rotate(-2deg); transform: rotate(-2deg); -webkit-transition: margin .1s ease, -webkit-transform .25s ease-out; -moz-transition: margin .1s ease, -moz-transform .25s ease-out; -o-transition: margin .1s ease, -o-transform .25s ease-out; transition: margin .1s ease, transform .25s ease-out; }
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script> <body> <div class="primary-content"> <section class="main-packages-wrapper"> <div class="package-down multigrain"> <a href="#"><img src="http://www.batterworld.com/wp-content/themes/batterworld/images/package_multigrain.png"></a> </div> </section> </div><!--END PRIMARY CONTENT-->
解決方案2
0 已采納 2015-06-02 19:50:54
我真的很驚訝您的jQuery懸停功能確實可以正常工作，因為您真正需要的是mouseenter -> addClass和mouseleave -> removeClass ，但是可能我不太清楚jQuery的.hover()是如何工作的。
盡管如此， 絕對不需要 jQuery甚至Javascript在mouseover上更改樣式。 您可以使用偽選擇器：hover來實現此目的：將要轉換的樣式放入
.package-down:hover { /* properties to transition to */ }
接下來，不要重復元素已經具有且不會改變的樣式。
最后，如果您的問題是並非所有屬性轉換都花費相同的時間，請不要這樣指定：
transition: margin .1s ease, transform .25s ease-out;
這將使邊距更改花費0.1s，但旋轉花費0.25s。
請更簡潔地描述您的過渡效果/效果。
另外，請注意，您不是在此處制作CSS動畫 ，而是在執行CSS過渡 。 在此處閱讀有關差異的更多信息：
解決方案3
0 2015-06-02 23:38:53
是的，JavaScript絕對是多余的。 所需要做的只是將CSS過渡應用於元素的：hover狀態。 我確實重復了一些過渡代碼，因為當光標離開懸停的元素時，這使過渡可以反向運行。 謝謝！ 在這里完成了codepen。
.package.original img {
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
-ms-transform: scale(1.2);
-o-transform: scale(1.2);
}
.package {
display: block;
position: relative;
height: 100%;
float: left;
width: 33.33%;
z-index: 1;
-webkit-transition: margin .15s ease-out;
-moz-transition: margin .15s ease-out;
-o-transition: margin .15s ease-out;
transition: margin .15s ease-out;
}
.package:hover {
display: block;
position: relative;
height: 100%;
float: left;
width: 33.33%;
z-index: 1;
margin: -50px 0 0 0;
-webkit-transform: rotate(-2deg);
-webkit-transition: margin .15s ease-out;
-moz-transition: margin .15s ease-out;
-o-transition: margin .15s ease-out;
transition: margin .15s ease-out;
}
.original:hover{
margin-left: -30px;
-webkit-transition: margin .15s ease-out;
-moz-transition: margin .15s ease-out;
-o-transition: margin .15s ease-out;
width: 33.33%;
z-index: 2;
}
CSS3動態更改動畫時的平滑過渡
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.