vueで表示を切り替えた項目をフェードインさせる

実現したいこと

要素の表示フラグを切り替えた際に、アニメーションでフェードイン/フェードアウトさせる

vue側の記述

isVisibleは表示状態を管理するフラグ

    <div
        :class="{
            fadeIn: isOpen,
            fadeOut: !isOpen,
            'open':isOpen,
            'close':!isOpen,
        }"
    >

css側の記述

.open {
  right: -10px;
  width:200px;
}
.close {
  right: -180px;
  width:200px;
}

.fadeIn {
    animation: fadeIn 1s;
}
@keyframes fadeIn {
    from {
        transform: translateX(100px);
    }
    to {
        transform: translateX(0px);
    }
}

.fadeOut {
    animation: fadeOut 1s;
}
@keyframes fadeOut {
    from {
        transform: translateX(-100px);
    }

    to {
        transform: translateX(0px);
    }
}