Open2021/02/10にコメント追加4

Vue.js の transition ラッパーコンポーネントを CSS Modules で利用する Tips

CSS

Sass

Vue.js

Toshifumi Imanishi

1. トランジションクラスをネストする方法

<transition name="fade">
 <p v-show="isShown" :class="$style.demo">Hello, world!</p>
</transition>

<style module lang="scss">
.demo {
  &:global(.fade-enter-active),
  &:global(.fade-leave-active){
    transition: opacity 0.5s;
  }

  &:global(.fade-enter),
  &:global(.fade-leave-to){
    opacity: 0;
  }
}
</style>

Toshifumi Imanishi

2. name 属性に CSS Modules で生成される一意なクラス名を渡す方法

<transition :name="$style.fade">
  <p v-show="isShown">Hello, world!</p>
</transition>

<style module lang="scss">
.fade {
  &:global(-enter-active),
  &:global(-leave-active){
    transition: opacity 0.5s;
  }

  &:global(-enter),
  &:global(-leave-to){
    opacity: 0;
  }
}
</style>

Toshifumi Imanishi

2. の解説

name 属性値に CSS Modules の一意なクラス名を指定することで、トランジションクラスは * に一意なクラス名が当てはまる

*-enter
*-enter-active
*-leave-active
*-leave-to

という命名規則になります。

CSS Modules の global 関数は引数にセレクタを渡すことで、そのセレクタをグローバルスコープに変更します。Sass の & と組み合わせることでセレクタと global 関数の引数に渡された文字列を連結させることができます。結果 name 属性値のトランジションクラスを作成することができます。

上記のキャプチャよりアニメーションの初期値を設定するためのトランジションクラス「V7g0k-enter」を追加しようとしているのが分かります。

Toshifumi Imanishi

3. カスタムトランジションでアニメーションさせる方法

<transition
  :enter-active-class="$style['fade-enter-active']"
  :leave-active-class="$style['fade-leave-active']"
  :leave-active-class="$style['fade-leave-active']"
  :leave-to-class="$style['fade-leave-to']"
>
  <p v-show="isShown">Hello, world!</p>
</transition>

<style module lang="scss">
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}

.fade-enter,
.fade-leave-to {
  opacity: 0;
}
</style>