vue做h5一镜到底动画

要实现一镜到底动画，可以使用Vue的过渡动画和监听滚动事件来实现。

首先，在Vue组件中，使用`<transition>`标签包裹需要做动画的元素，并设置`mode="out-in"`，表示在元素离开之前，新元素会插入并等待动画结束后再执行元素离开的动画。

然后，在`mounted`生命周期钩子中，监听`window`对象的`scroll`事件。在事件处理函数中，使用`window.scrollY`获取当前滚动的距离，并通过计算滚动距离与元素高度的比例来控制动画的进度，从而实现一镜到底的效果。

以下是一个简单的示例代码：

<template>
  <div>
    <transition name="fade" mode="out-in">
      <div v-show="show" class="content">
        <!-- 内容 -->
      </div>
    </transition>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: false,
      height: 0,
      scrollTop: 0
    };
  },
  mounted() {
    this.height = this.$el.offsetHeight;
    window.addEventListener("scroll", this.handleScroll);
  },
  destroyed() {
    window.removeEventListener("scroll", this.handleScroll);
  },
  methods: {
    handleScroll() {
      this.scrollTop = window.scrollY;
      if (this.scrollTop / this.height > 0.9) {
        this.show = true;
      } else {
        this.show = false;
      }
    }
  }
}
</script>

<style>
.content {
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

.fade-enter,
.fade-leave-to {
  opacity: 0;
}
</style>

在上面的代码中，`height`表示元素的高度，`scrollTop`表示当前滚动的距离，通过计算`scrollTop`与`height`的比例来控制元素的显示和隐藏。`handleScroll`方法监听`scroll`事件，并在滚动距离达到一定值时，设置`show`为`true`，触发过渡动画。过渡动画使用了Vue的内置过渡类名`fade-enter`和`fade-leave-to`，通过设置`opacity`来实现渐变效果。