3

我有一个按钮，它从页面的右侧到中心进行动画处理。

在 FF 和 Opera 中它运行良好。在 safari 中，它会转到页面的中间，然后跳回侧面。

按钮有位置

right:35px;
width: 325px;

然后它与目的地一起动画：

right: 50%;
right: calc(50% - 325px/2);
right: -webkit-calc(50% - 325px/2px);

我得到了后备，我得到了-webkit，但它仍然跳回

right:35px;

我真的不知道这里出了什么问题..按钮有 .class1 位置正确：35px....单击它会将类更改为 .class2 并带有 calc-position。所以在css中，右边35px什么都没有……我很困惑……

编辑：

$("#konf-menu").click(function() {
  $(".konf-button").addClass('konf-animation').removeClass('line-right');
});
.konf-animation {
  position: fixed;
  visibility: visible;
  display: block;
  width: 325px;
  font-family: 'Dosis', sans-serif;
  letter-spacing: normal;
  font-weight: 400;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  font-size: 15px;
  -webkit-transform-origin: 100% 50%;
  -moz-transform-origin: 100% 50%;
  -ms-transform-origin: 100% 50%;
  -o-transform-origin: 100% 50%;
  transform-origin: 100% 50%;
  top: 50%;
  margin-top: -200px;
  -webkit-transition: all 0.7s;
  -moz-transition: all 0.7s;
  -ms-transition: all 0.7s;
  -o-transition: all 0.7s;
  transition: all 0.7s;
  z-index: 1006;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  top: calc(50% + 250px);
  right: 50%;
  right: calc(50% - 325px/2);
  right: -webkit-calc(50% - 325px/2);
  animation: konfi 1.8s;
  -moz-animation: konfi 1.8s;
  -webkit-animation: konfi 1.8s;
}
@keyframes konfi {
  0% {
    right: 0px;
  }
  90% {
    right: calc(45% -325px/2);
  }
  100% {
    right: calc(50% - 325px/2);
  }
}
.line-right {
  position: fixed;
  visibility: visible;
  display: block;
  width: 325px;
  font-family: 'Dosis', sans-serif;
  letter-spacing: normal;
  font-weight: 400;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  font-size: 15px;
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  transform: rotate(-90deg);
  -webkit-transform-origin: 100% 50%;
  -moz-transform-origin: 100% 50%;
  -ms-transform-origin: 100% 50%;
  -o-transform-origin: 100% 50%;
  transform-origin: 100% 50%;
  right: 35px;
  top: 50%;
  margin-top: -200px;
  -webkit-transition: all 0.7s;
  -moz-transition: all 0.7s;
  -ms-transition: all 0.7s;
  -o-transition: all 0.7s;
  transition: all 0.7s;
  z-index: 1006;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<a class=" link-underline menu-btn nav-link color-head konf hide-menu" href="#konfigurator" id="konf-menu">Konfigurator</a>

<div class="line-right konf-button">
  <div class="button-subscribe-wrap ex-modal-launcher konfig-btn">
    <button class="button-subscribe navscroll">Angebotskonfigurator</button>
  </div>
</div>

EDIT2：这是瞬时代码。就像我说的，在 FF 和 Opera 中，它的功能应有尽有。在 Safari 9+ 中，它会到达目的地，然后跳回到右侧的某个地方。我找不到错。在 FF 和 O. 中也使用 jquery 进行了尝试，该方法更加崩溃。

4

1 回答 1

0

Safari 似乎对“transition: all”有问题。

解决方案是专门处理正确的转换属性。

代替

-webkit-transition: all 0.7s;
-moz-transition: all 0.7s;
-ms-transition: all 0.7s;
-o-transition: all 0.7s;
transition: all 0.7s;

我现在用

-webkit-transition: transform 0.7s;
-moz-transition: transform 0.7s;
-ms-transition: transform 0.7s;
-o-transition: transform 0.7s;
transition: transform 0.7s;

一切顺利。

于 2016-09-01T08:46:56.780 回答