要素からクラスを削除するときに反応して、アニメーションを追加しますか？

Question

私は最初は透明なボタンを持っています。それが押されると、 "b"または "w"の小道具を渡すことで色のついた円に成長します。まだ押されていなければ、それは透明のままでなければならない。さらに、黒または白のボタンは予め決定することができない。また、その小道具がnullになったときに透明に戻すようにしたいと思っています。成長部分は私のためにうまくいっていますが、縮小はありません。

ボタンは、小道具の値をチェックし、クラスを適用するかを決定：適切なアニメーションを行い、黒と白のクラスを追加する際にCSSで

render() { 
    var areaClass = classnames({ 
     button: true, 
     black: this.props.gameState === "b", 
     white: this.props.gameState === "w", 
    }) 
    return (
     <button className={areaClass} onClick={() => this.props.onClick()}></button> 
    ); 
    } 

は、私が成長のキーフレームを使用しています。ボタンクラスにシュリンクキーフレームを入れようとしましたが、黒または白のクラスを削除するとアニメーションが適用されません。あたかもアニメーションがないかのように点滅しているだけです。

button { 
    z-index: 3; 
    position: relative; 
    width: 30px; 
    height: 30px; 
    margin: 2px; 
    border-radius: 50%; 
    background: transparent; 
    border-color: transparent; 
    animation-name: shrink; 
    animation-duration: 0.3s; 
} 

.button:focus { 
    outline: none; 
} 

.black, .white { 
    animation-name: grow; 
    animation-duration: 0.3s; 
} 

.black { 
    background: black; 
} 

.white { 
    background: white; 
    border: 2px solid black; 
} 

@keyframes grow { 
    0% {transform: scale(0, 0);} 
    100% {transform: scale(1, 1);} 
} 

@keyframes shrink { 
    0% {transform: scale(1, 1);} 
    100% {transform: scale(0, 0);} 
} 

Answer 1

問題はReactやアニメーションではありませんが、実際にはあなたのボタンは期待どおり縮小しています。ただし、blackとwhiteのクラス名は、ボタンの背景色を定義するクラス名であり、削除されるクラス名です。あなたのボタンは縮小していますが、透明です。

常に背景色を定義しておき、異なるクラス名のgrowアニメーションを割り当てます。また、animation-fill-mode: forwards;を適用して、ボタンをアニメーションの終了状態のままにします。変更とフィドルの作業

.btn { 
    /* other styles */ 
    animation-fill-mode: forwards; 
} 

.grow { 
    animation-name: grow; 
} 

.black { 
    background: black; 
} 

.white { 
    background: white; 
    border: 2px solid black; 
}: 

：https://jsfiddle.net/ssorallen/1dL2wkaq/