vue实现slideup效果例子

Vue 实现 SlideUp 效果的示例

在 Vue 中实现 SlideUp 效果可以通过 CSS 过渡或动画结合 Vue 的 <transition> 组件完成。以下是两种常见实现方式：

使用 CSS Transition 实现

通过 Vue 的 <transition> 组件和 CSS 过渡属性实现平滑的滑动效果。

模板部分：

<template>
  <div>
    <button @click="toggle">Toggle Slide</button>
    <transition name="slide">
      <div v-if="show" class="content">Slide Up Content</div>
    </transition>
  </div>
</template>

脚本部分：

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

样式部分：

<style>
.slide-enter-active, .slide-leave-active {
  transition: all 0.5s ease;
}
.slide-enter, .slide-leave-to {
  transform: translateY(100%);
  opacity: 0;
}
.content {
  height: 100px;
  background: #f0f0f0;
  margin-top: 10px;
}
</style>

使用 CSS Animation 实现

通过 CSS 关键帧动画实现更复杂的 SlideUp 效果。

模板部分：

<template>
  <div>
    <button @click="toggle">Toggle Slide</button>
    <transition name="slide-anim">
      <div v-if="show" class="content">Slide Up Content</div>
    </transition>
  </div>
</template>

样式部分：

<style>
.slide-anim-enter-active {
  animation: slide-up 0.5s ease;
}
.slide-anim-leave-active {
  animation: slide-up 0.5s ease reverse;
}
@keyframes slide-up {
  0% {
    transform: translateY(100%);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
.content {
  height: 100px;
  background: #f0f0f0;
  margin-top: 10px;
}
</style>

使用第三方库（如 Velocity.js）

如果需要更复杂的动画效果，可以结合 velocity-animate 库实现。

安装依赖：

npm install velocity-animate

模板部分：

<template>
  <div>
    <button @click="toggle">Toggle Slide</button>
    <transition
      @enter="enter"
      @leave="leave"
      :css="false"
    >
      <div v-if="show" class="content">Slide Up Content</div>
    </transition>
  </div>
</template>

脚本部分：

<script>
import Velocity from 'velocity-animate';

export default {
  data() {
    return {
      show: false
    };
  },
  methods: {
    toggle() {
      this.show = !this.show;
    },
    enter(el, done) {
      Velocity(el, { opacity: 1, translateY: 0 }, { duration: 500, complete: done });
    },
    leave(el, done) {
      Velocity(el, { opacity: 0, translateY: '100%' }, { duration: 500, complete: done });
    }
  }
};
</script>

以上方法均能实现 SlideUp 效果，可根据项目需求选择合适的方式。CSS Transition 适合简单场景，而第三方库适合复杂动画控制。