要素の削除の時だけFLIPアニメーションしない問題の対応

問題

vueではtransition-groupを使ってアニメーションすることができますが、それで書いていた時に要素の削除の時だけFLIPアニメーションが効かない問題の対処法です。

See the Pen vue flip animation test (fail) by wintyo (@wintyo) on CodePen.

原因

凄く恥ずかしい話ですが、アニメーションの設定を一番上に書いていたせいで設定が上書きされなかっただけでした。
FLIPアニメーションをするために重要な.flip-leave-activeにposition: absoluteを設定した内容が、適応先の要素である.itemにposition: relativeを設定していたため、要素が消えるアニメーション中でもrelativeのままで、結果的に.flip-moveクラスが付与されませんでした。

うっかりプロパティを上書きしちゃった例

.flip {
  // 要素が入るときのアニメーション
  &-enter {
    &-active {
      opacity: 0;
      transform: translate3d(0, -30px, 0);
    }
    &-to {
      opacity: 1;
      transform: translate3d(0, 0, 0);
    }
  }

  // 要素が消える時のアニメーション
  &-leave {
    &-active {
      // FLIPアニメーションするために必要な設定
      position: absolute;
    }
    &-to {
      opacity: 0;
      transform: translate3d(0, -30px, 0);
    }
  }
}

.list {
  position: relative;
  margin: 20px 0 0;
  padding: 0;
}

.item {
  // ここで設定したrelativeが、上のabsoluteの設定を上書きしていた
  position: relative;
  display: inline-block;
  padding: 10px 20px;
  transition: all 0.5s;
  
  &__delete {
    position: absolute;
    top: 0;
    right: 0;
    width: 20px;
    height: 20px;
    
    &::before, &::after {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 70%;
      height: 2px;
      background-color: #ccc;
      content: '';
    }
    
    &::before {
      transform: translate3d(-50%, -50%, 0) rotate(45deg);
    }
    
    &::after {
      transform: translate3d(-50%, -50%, 0) rotate(135deg);
    }
  }
}

解決方法

一番単純なのはアニメーションの設定クラスを一番下にしてしまうことです。
ただ大きくなるとファイルを分けてインポートしたりして順番とか分からなくなるので、上書きしてしまうようなプロパティは設定しないことが一番だと思います。
今回はバツボタンを配置するために親要素にrelativeをつける必要がありましたが、.item__innerを新たに作ってそれにrelativeをつけるとかできると思います（最初原因が分からなかったのでその対応をしていました）。