Question

我正在重建某人以及其他CSS3过渡，以使其适用于Safari，Chrome和Firefox。 In their version（鼠标悬停在包图像上），转换在Safari中运行良好，但在其他两种情况下效果不佳：元素卡在＆＃34; up＆＃34;位置。 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;

}

Answer 1

虽然我同意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

＆＃13;

$(function() {
	$('.package-down').hover(function() {
		$('.package-down').toggleClass('package-up');

		
		
	});
});

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

我真的很惊讶你的jQuery悬停功能完全可以工作，因为你真正需要的是mouseenter -> addClass和mouseleave -> removeClass，但可能是我不完全是了解jQuery＆＃39; .hover()的工作原理。

尽管如此，jQuery甚至Javascript还是绝对不需要来更改mouseover上的样式。你有伪选择器：为此目的悬停：将你想要转换的样式放入

.package-down:hover { /* properties to transition to */ }

接下来，不要重复元素已经拥有且不会更改的样式。

最后，如果您的问题是并非所有属性转换都花费相同的时间，请不要指定：

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

这将使保证金变化需要0.1秒，但轮换需要0.25秒。

请更简洁地描述您的过渡期待/表现如何。

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

此外，请注意您这里没有 css动画，而是 css过渡。点击此处了解有关差异的更多信息：

CSS: Animation vs. Transition

Answer 3

是的，javascript肯定是无关紧要的。所需要的只是应用于：元素的悬停状态的CSS过渡。我最终重复了一些转换代码，因为当光标离开悬停元素时，它会使转换反向运行。谢谢！ 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;

}

在野生动物园中{c} 3过渡并不顺利

3 个答案: