vue3 を使用して Mac のドック マウス ホバー アニメーションをシミュレートする

Vue 3 を使用して Mac Dock マウス ホバー アニメーションをシミュレートするには、Vue のトランジション エフェクトと動的クラス バインディングを使用してそれを実現できます。

<div id="app">
  <div class="dock">
    <div
      class="dock-item"
      v-for="(item, index) in dockItems"
      :key="index"
      :class="{ active: item.active }"
      @mouseover="hoverItem(index)"
      @mouseout="unhoverItem(index)"
    >
      {
   
   { item.name }}
    </div>
  </div>
</div>

CSSコード:

.dock {
  display: flex;
  justify-content: center;
  background-color: #f0f0f0;
  padding: 10px;
}

.dock-item {
  padding: 10px;
  cursor: pointer;
}

.dock-item.active {
  background-color: #c0c0c0;
  color: #fff;
}

Vue コード:

const app = Vue.createApp({
  data() {
    return {
      dockItems: [
        { name: 'Safari', active: false },
        { name: 'Mail', active: false },
        { name: 'Calendar', active: false },
        { name: 'Notes', active: false }
      ]
    };
  },
  methods: {
    hoverItem(index) {
      this.dockItems[index].active = true;
    },
    unhoverItem(index) {
      this.dockItems[index].active = false;
    }
  }
});

app.mount('#app');

上記のコードでは、Vue 3 を使用して Vue アプリケーションを作成し、dockItems各 Dock 項目に名前とアクティビティ ステータス情報が含まれるデータ配列を定義しました。

HTML では、Vue の命令を使用してv-forDock アイテムのレンダリングをループし、動的クラス バインディングを使用して属性に基づい:classてactiveアイテムのスタイルを切り替えます。マウスをホバーすると、hoverItemメソッドを呼び出して Dock 項目のactiveプロパティを に設定しtrue、それによって項目のスタイルを変更します。マウスが離れると、メソッドを呼び出してunhoverItemDock 項目のプロパティをactive設定しfalse、項目のスタイルを復元します。

HTML ファイルに Vue.js ライブラリが含まれていることを確認し、上記のコードを正しい場所に配置してください。

このようにして、コードを HTML ファイルにコピーしてブラウザで開くと、Mac ドックのマウス ホバー アニメーションをシミュレートする Vue 3 の効果を確認できます。