ページの右から中央に向かってアニメーション化されたボタンがあります。
FF と Opera ではうまく機能します。Safari では、ページの中央に移動してから、横にジャンプします。
ボタンには位置があります
right:35px;
width: 325px;
次に、宛先でアニメーション化されます。
right: 50%;
right: calc(50% - 325px/2);
right: -webkit-calc(50% - 325px/2px);
フォールバックを取得し、-webkit を取得しましたが、それでもジャンプして元に戻ります
right:35px;
ここで何が問題なのか本当にわかりません..ボタンには位置right:35pxの.class1があります....クリックすると、クラスがcalc-positionで.class2に変更されます。したがって、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で試してみました..