Question

我有一个按钮，从页面右侧到中心设置动画。

在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的东西......我很困惑......

编辑：

＆＃13;

$("#konf-menu").click(function() {
  $(".konf-button").addClass('konf-animation').removeClass('line-right');
});

＆＃13;

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

＆＃13;

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

＆＃13;

EDIT2：这是瞬时代码。就像我说的那样，在FF中，它的功能就像它应该的那样。在Safari 9+中，它会到达目的地，然后跳回到右侧的某个位置。我无法找到错误。尝试使用jquery，它更加破碎，也在FF和O ..

Answer 1

Safari似乎遇到了问题＆＃34;过渡：全部＆＃34;。

解决方案是专门针对正确的过渡属性。

而不是

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

一切都很顺利。

safari calc（）离开问题

1 个答案: