vue实现滑动框

实现滑动框的基本思路

在Vue中实现滑动框可以通过结合CSS过渡效果和Vue的响应式特性来完成。常见的滑动框场景包括侧边栏滑动、下拉菜单滑动等。以下是两种常见的实现方式。

使用CSS过渡效果

定义一个包含滑动内容的组件，利用Vue的v-show或v-if控制显示，并通过CSS过渡实现平滑滑动效果。

<template>
  <div>
    <button @click="toggleSlide">Toggle Slide</button>
    <div class="slide-container" :class="{ 'slide-active': isActive }">
      <div class="slide-content">
        <!-- 滑动框内容 -->
      </div>
    </div>
  </div>
</template>

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

<style>
.slide-container {
  width: 300px;
  height: 0;
  overflow: hidden;
  transition: height 0.3s ease;
}

.slide-active {
  height: 200px;
}

.slide-content {
  padding: 20px;
  background: #f0f0f0;
}
</style>

使用Vue过渡组件

Vue提供了内置的<transition>组件，可以更方便地实现滑动动画效果。

<template>
  <div>
    <button @click="toggleSlide">Toggle Slide</button>
    <transition name="slide">
      <div class="slide-content" v-show="isActive">
        <!-- 滑动框内容 -->
      </div>
    </transition>
  </div>
</template>

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

<style>
.slide-content {
  width: 300px;
  padding: 20px;
  background: #f0f0f0;
}

.slide-enter-active, .slide-leave-active {
  transition: all 0.3s ease;
}

.slide-enter, .slide-leave-to {
  transform: translateX(100%);
}
</style>

结合第三方库实现复杂滑动

对于更复杂的滑动效果，可以结合第三方动画库如GSAP或Animate.css。

<template>
  <div>
    <button @click="toggleSlide">Toggle Slide</button>
    <div ref="slideBox" class="slide-content">
      <!-- 滑动框内容 -->
    </div>
  </div>
</template>

<script>
import { gsap } from 'gsap';

export default {
  data() {
    return {
      isActive: false
    };
  },
  methods: {
    toggleSlide() {
      this.isActive = !this.isActive;
      if (this.isActive) {
        gsap.to(this.$refs.slideBox, { x: 0, duration: 0.3 });
      } else {
        gsap.to(this.$refs.slideBox, { x: 300, duration: 0.3 });
      }
    }
  }
};
</script>

<style>
.slide-content {
  width: 300px;
  padding: 20px;
  background: #f0f0f0;
  transform: translateX(300px);
}
</style>

响应式滑动框

根据屏幕尺寸动态调整滑动框的显示方式，例如在小屏幕上滑动框覆盖全屏。

<template>
  <div>
    <button @click="toggleSlide">Toggle Slide</button>
    <div class="slide-content" :class="{ 'fullscreen': isMobile }" v-show="isActive">
      <!-- 滑动框内容 -->
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isActive: false,
      isMobile: false
    };
  },
  mounted() {
    this.checkScreenSize();
    window.addEventListener('resize', this.checkScreenSize);
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.checkScreenSize);
  },
  methods: {
    toggleSlide() {
      this.isActive = !this.isActive;
    },
    checkScreenSize() {
      this.isMobile = window.innerWidth < 768;
    }
  }
};
</script>

<style>
.slide-content {
  width: 300px;
  padding: 20px;
  background: #f0f0f0;
  transition: all 0.3s ease;
}

.slide-content.fullscreen {
  width: 100%;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
}
</style>

以上方法可以根据实际需求选择或组合使用，以实现不同场景下的滑动框效果。