Use vue3 to simulate Mac dock mouse hover animation

To use Vue 3 to simulate the Mac Dock mouse hover animation, you can use Vue's transition effects and dynamic class binding to achieve it.

<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 code:

.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 code:

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');

In the above code, we created a Vue application using Vue 3 and defined a dockItemsdata array, in which each Dock item contains name and activity status information.

In HTML, we use Vue's instructions v-forto loop through rendering Dock items, and use dynamic class binding :classto activeswitch the style of items based on attributes. When the mouse is hovered, call hoverItemthe method to set the Dock item's activeproperty to true, thereby changing the item's style. When the mouse leaves, call the method to set unhoverItemthe Dock item's property to restore the item's style.activefalse

Please make sure you include the Vue.js library in your HTML file and place the above code in the correct location.

In this way, when you copy the code into the HTML file and open it in the browser, you can see the effect of Vue 3 simulating the mouse hover animation of the Mac dock.