円滑にトランスフォームを回転させる

Question

カーソルを1つのメニュー項目に移動した後、変換が完了する前にカーソルをわずかに移動すると、変換が再び開始されます。メニュー項目を少し動かすと、何度も何度も起こります。 どうすればこの問題を解決できますか？ FYI

<ul id="menu-1"> 
<li><a href="#">Menu Item 1</a></li> 
<li><a href="#">Menu Item 2</a></li> 
<li><a href="#">Menu Item 3</a></li> 
<li><a href="#">Menu Item 4</a></li> 
<li><a href="#">Menu Item 5</a></li> 
<li><a href="#">Menu Item 6</a></li> 
</ul> 

ul#menu-1 { 
    list-style: none; 
    margin-left: 0; 
    width:100% 
} 
ul#menu-1 li{ 
    background: #000; 
    display: inline-block; 
    margin-bottom: 0.25em; 
    min-width: 15.87%; 
    animation: elmtoFront 1.2s linear normal forwards; 
} 

ul#menu-1 li a { 
    display:block; 
color: #fff; 
    padding: 0.5em 1.5em; 
    text-decoration:none; 
} 
ul#menu-1 li a:hover{ 
    transition: 1.2s ease-in-out; 
    transform-style: preserve-3d;  
    transform: rotateY(-360deg); 
    animation:elmtoBack 1.2s linear normal forwards; 
} 
@keyframes elmtoBack { 
    0% {z-index:0;} 
    100% {z-index:1;} 
} 
@keyframes elmtoFront { 
    0% {z-index:1;} 
    100% {z-index:0;} 
} 

：https://jsfiddle.net/anushkakrajasingha/bpp48a15/6/

Answer 1

変更この

ul#menu-1 li:hover a{ 

Fiddle

Answer 2

にこの

ul#menu-1 li a:hover{ 

がaltern性を付与ative選択

変更ul#menu-1 li a:hover

ul#menu-1 li:hover aから

ul#menu-1 li:hover a{ 
    transition: 1s ease-in-out; 
    transform-style: preserve-3d;  
    transform: rotateY(-360deg); 
    animation:elmtoBack 1.2s linear normal forwards; 
} 

Answer 3

以下のように私はすでに他の回答に記載されているので、解決に集中するつもりはないが、彼らはそれがこのように起こっている理由についての説明が不足しています。それで、私は少し説明します。

理由：あなたはrotateYa要素に対して変換を使用しているため

それはあります。このような変換を使用すると、要素が回転するにつれて要素の境界が小さくなります。したがって、変換が進行しているときにカーソルを移動すると、実際にはが要素のをホバリングし、要素に戻っている可能性が高くなります。これは、あなたが知っているように、hoverセレクタを再トリガして適用し、変換を再開することになります。

たとえば、以下のスニペットを見て、変形が起こっているときに要素の罫線がどのように縮小するかを見てください。再起動エフェクトは、ボックスの端からホバーインすると発音されます。これは、サイズが小さくなるにつれてカーソルが素早くボックスの外に出るためです。

.transformed { 
 
    height: 200px; 
 
    width: 200px; 
 
    background: yellowgreen; 
 
    border: 3px solid black; 
 
    transition: all 1s; 
 
} 
 
.transformed:hover { 
 
    transform: rotateY(-360deg); 
 
]

<div class='transformed'>Some content</div>

ソリューション：liがオンに推移したときすでに他の回答で説明

、liとスタイルaに:hoverを置きます。これが完了すると、境界は決して変化しないので、カーソル位置は実際に要素の外に出ることはありません。したがって、:hoverセレクタの再トリガはなく、再起動しません。

ul#menu-1 { 
 
    list-style: none; 
 
    margin-left: 0; 
 
    width: 100% 
 
} 
 
ul#menu-1 li { 
 
    background: #000; 
 
    display: inline-block; 
 
    margin-bottom: 0.25em; 
 
    min-width: 15.87%; 
 
    animation: elmtoFront 1.2s linear normal forwards; 
 
} 
 
ul#menu-1 li a { 
 
    display: block; 
 
    color: #fff; 
 
    padding: 0.5em 1.5em; 
 
    text-decoration: none; 
 
} 
 
ul#menu-1 li:hover a { 
 
    transition: 1.2s ease-in-out; 
 
    transform-style: preserve-3d; 
 
    transform: rotateY(-360deg); 
 
    animation: elmtoBack 1.2s linear normal forwards; 
 
} 
 
@keyframes elmtoBack { 
 
    0% { 
 
    z-index: 0; 
 
    } 
 
    100% { 
 
    z-index: 1; 
 
    } 
 
} 
 
@keyframes elmtoFront { 
 
    0% { 
 
    z-index: 1; 
 
    } 
 
    100% { 
 
    z-index: 0; 
 
    } 
 
}

<ul id="menu-1"> 
 
    <li><a href="#">Menu Item 1</a> 
 
    </li> 
 
    <li><a href="#">Menu Item 2</a> 
 
    </li> 
 
    <li><a href="#">Menu Item 3</a> 
 
    </li> 
 
    <li><a href="#">Menu Item 4</a> 
 
    </li> 
 
    <li><a href="#">Menu Item 5</a> 
 
    </li> 
 
    <li><a href="#">Menu Item 6</a> 
 
    </li> 
 
</ul>