safari 中的 css3 过渡不顺畅

Posted 2023-03-06

【中文标题】safari 中的 css3 过渡不顺畅

【英文标题】：css3 transition is not smooth in safari

【发布时间】：2015-08-16 18:39:37

【问题描述】：

我正在重建其他人的 CSS3 过渡，使其能够在 Safari、Chrome 和 Firefox 上运行。 In their version（将鼠标悬停在包装图像上），过渡在 Safari 中效果很好，但在其他两个中效果不佳：元素卡在“向上”位置。 In my version，过渡在 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;

【问题讨论】：

请提供一个可用的小提琴，以便我们开始使用它。

@connexo 用户提供了一个可用的 CodePen，您可以使用它。

嗨@connexo，谢谢！我包含了一个 codepen 链接，可以吗？ codepen.io/sistercylon/pen/BNWLZR

IE9: Why setting "-ms-transform" works from css, but not with jquery.css()的可能重复

@TylerH 啊，我在文中错过了。谢谢你告诉我！

【参考方案1】：

是的，javascript 绝对是多余的。所需要的只是将 CSS 转换应用于元素的 :hover 状态。我最终确实重复了一些转换代码，因为当光标离开悬停元素时，这使转换能够反向运行。谢谢！ Finished codepen here.

.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;

【参考方案2】：

虽然我同意这个问题不需要 jQuery，但真正的问题似乎是浏览器前缀的使用不一致。

您需要在 .package-down 和 .package-up 上为 transform: rotate() 添加前缀。

还有这个：

-webkit-transition: margin .1s ease, transform .25s ease-out;

应该是这样的：

-webkit-transition: margin .1s ease, -webkit-transform .25s ease-out;

这将是对所有其他前缀转换属性的类似调整。

See Codepen

$(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-->

【参考方案3】：

我真的很惊讶你的 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。

请更简洁地描述您的过渡的外观/表现。

http://codepen.io/anon/pen/aOJmKe

另外，请注意，您在这里做的不是 css 动画，而是 css 过渡。在此处阅读有关差异的更多信息：

CSS: Animation vs. Transition

【讨论】：

谢谢@connexo，我将在今天晚些时候尝试 :hover 修复。我很感激。动画应该是这样的： 1. 在悬停时，包应该在 0.1 秒内边缘或平移并开始轻微旋转 2. 一旦包到达顶部位置，它应该通过缓出来继续旋转，因为旋转应该在垂直移动之后发生一点。

希望它有效，你学到了一点。如果这解决了您的问题，或者对您自己解决问题有很大帮助，请记得点击答案左侧的复选标记。

是的，javascript 绝对是无关紧要的。所需要的只是将 CSS 转换应用于元素的 :hover 状态。我最终确实重复了一些转换代码，因为当光标离开悬停元素时，这使转换能够反向运行。谢谢！ Finished codepen here.