悬停动画不令人agger舌

Question

我的文件较少：

// irrelevant stuff -----------------------------------------------------

@ease-out-back: cubic-bezier(0.175, 0.885, 0.320, 1.275);

// ----------


// keyframes -----------------------------------------------------

@keyframes in {
    0% { transform: translateY(200px) rotateX(180deg) rotateY(-180deg) rotateZ(15deg); opacity:0; }
    100% { transform: none; opacity: 1; }
}

@keyframes out {
    0% { transform: none; opacity: 1; }
    100% { transform: translateY(200px) rotateX(180deg) rotateY(-180deg) rotateZ(15deg); opacity:0; }
}

.vote{
    height:100px;
    width: 100px;
    z-index: 1000;
    opacity: 0;
    background: red;
    margin:15px;
    display: inline-block; 
}

// ---------

// loop -----------------------------------------------------

.vote-loop (@i) when (@i > 0) {

    @stag: 350 * (@i - 1); // skip first
    div:nth-child(@{i}){ animation-delay: ~"@{stag}ms"; }
    .vote-loop(@i - 1);
}

@iterations: 30; // specify iteration count
.vote-loop(@iterations); // execute loop

// --------


// --------
.voteRoot{
    background: green;
}

// apply animation -----------------------------------------------------

.voteRoot:hover .vote {
    animation: in .7s forwards @ease-out-back;
}
// apply animation -----------------------------------------------------

.vote {
    animation: out .7s forwards @ease-out-back;
}

// --------

我的实现是

import * as React from 'react';
import './styles.less'

export interface InputProps {
}

export const PopupMenu = (props: InputProps) => {
    return <div className="voteRoot">
        <div className="vote">Popup Menu</div>
        <div className="vote">Popup Menu</div>
        <div className="vote">Popup Menu</div>
        <div className="vote">Popup Menu</div>
        <div className="vote">Popup Menu</div>
        <div className="vote">Popup Menu</div>
        <div className="vote">Popup Menu</div>
    </div>;
}

注意voiceRoot：hover .vote播放in的动画，但动画并不交错。

如果将in动画放置在表决根中，但会错开。