vue通过点击或悬停实现slideToggole效果

最新推荐文章于 2023-08-05 14:21:39 发布

路不在自己脚下

最新推荐文章于 2023-08-05 14:21:39 发布

阅读量646

点赞数

分类专栏： vue.js css

本文链接：https://blog.csdn.net/qq_43579525/article/details/100569560

版权

本文介绍了如何在Vue应用中利用事件监听和CSS动画，通过点击或鼠标悬停触发元素的slideToggle效果。详细讲解了绑定事件、操作CSS类以及结合过渡组件实现平滑的展开和收起动画。

摘要由CSDN通过智能技术生成

<template>
  <div id="app">
    <div class="slide-toggole">
      <button @click="show = !show">slideToggle效果</button>
      <transition name="ul">
        <ul v-if="show" class="ul-box">
          <li>11111111111111</li>
          <li>11111111111111</li>
          <li>11111111111111</li>
          <li>11111111111111</li>
          <li>11111111111111</li>
          <li>11111111111111</li>
          <li>11111111111111</li>
          <li>11111111111111</li>
          <li>11111111111111</li>
        </ul>
      </transition>
    </div>

    <div class="hover">
      <button @mouseenter="mouseenter" @mouseleave="mouseleave">hover效果</button>
      <transition name="