vue实现按钮滑动

Vue 实现按钮滑动效果

使用 CSS 过渡和 Vue 绑定

通过 Vue 的 v-bind 动态绑定样式，结合 CSS 的 transition 实现平滑滑动效果。在按钮上添加鼠标事件监听，改变其位置属性。

<template>
  <button 
    @mouseover="isHover = true" 
    @mouseleave="isHover = false"
    :style="{ transform: isHover ? 'translateX(20px)' : 'translateX(0)' }"
  >
    滑动按钮
  </button>
</template>

<script>
export default {
  data() {
    return {
      isHover: false
    };
  }
};
</script>

<style scoped>
button {
  transition: transform 0.3s ease;
}
</style>

使用 Vue 动画组件

利用 Vue 内置的 <transition> 组件实现更复杂的动画效果。通过条件渲染或状态变化触发动画。

<template>
  <button @click="toggleSlide">
    <transition name="slide">
      <span v-if="showText">点击滑动</span>
    </transition>
  </button>
</template>

<script>
export default {
  data() {
    return {
      showText: true
    };
  },
  methods: {
    toggleSlide() {
      this.showText = !this.showText;
    }
  }
};
</script>

<style scoped>
.slide-enter-active, .slide-leave-active {
  transition: all 0.5s;
}
.slide-enter, .slide-leave-to {
  transform: translateX(50px);
  opacity: 0;
}
</style>

结合第三方动画库

使用如 animate.css 或 GSAP 增强动画效果。通过 Vue 指令或方法调用库功能。

<template>
  <button 
    @mouseenter="slideButton"
    ref="btn"
    class="animated"
  >
    高级滑动
  </button>
</template>

<script>
import { gsap } from 'gsap';
export default {
  methods: {
    slideButton() {
      gsap.to(this.$refs.btn, {
        x: 30,
        duration: 0.5,
        ease: "power2.out"
      });
    }
  }
};
</script>

动态列表项滑动

针对列表中的多个按钮，使用 v-for 渲染并为每个按钮添加独立滑动控制。

<template>
  <div v-for="(item, index) in items" :key="index">
    <button
      @mouseover="activeIndex = index"
      :style="{ transform: activeIndex === index ? 'translateX(15px)' : '' }"
    >
      {{ item }}
    </button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: ['按钮A', '按钮B', '按钮C'],
      activeIndex: null
    };
  }
};
</script>

<style scoped>
button {
  transition: transform 0.2s;
}
</style>

触摸设备适配

通过 @touchstart 和 @touchend 事件实现移动端触摸滑动反馈。

<template>
  <button
    @touchstart="startSlide"
    @touchend="resetSlide"
    :style="{ transform: `translateX(${slideOffset}px)` }"
  >
    触摸滑动
  </button>
</template>

<script>
export default {
  data() {
    return {
      slideOffset: 0
    };
  },
  methods: {
    startSlide() {
      this.slideOffset = 20;
    },
    resetSlide() {
      this.slideOffset = 0;
    }
  }
};
</script>

<style scoped>
button {
  transition: transform 0.15s;
}
</style>