给uniapp中元素切换增加过渡效果以及注意点

可以使用<transition>组件，设置`name`属性为`slide`，再定义需要的过渡效果，下面是一个demo

示例代码：

<template>
  <view>
    <transition name="slide" @before-enter="beforeEnter" @enter="enter" @leave="leave">
      <view v-if="showElement" class="slide-element">
        <!-- 切换的内容在这里 -->
        <text>切换的内容在这里</text>
      </view>
      <view v-else class="slide-element">
        <!-- 要切换的元素内容 -->
        <text>1111111111</text>
      </view>
    </transition>

    <button @click="toggleElement">切换元素</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      showElement: true,
    };
  },
  methods: {
    toggleElement() {
      this.showElement = !this.showElement;
    },
    beforeEnter(el) {
      el.style.transform = 'translateX(100%)';
    },
    enter(el, done) {
      el.offsetHeight; // 触发重绘
      el.style.transition = 'transform 0.5s';
      el.style.transform = 'translateX(0)';
      done();
    },
    leave(el, done) {
      el.style.transition = 'transform 0.5s';
      el.style.transform = 'translateX(-100%)';
      done();
    },
  },
};
</script>

<style>
/* 定义过渡类的 CSS */
.slide-enter-active,
.slide-leave-active {
  transition: transform 0.5s;
}
.slide-enter,
.slide-leave-to {
  transform: translateX(-100%);
}
</style>

有几个注意点：

1. `beforeEnter` `leave` `enter` 都是vue.js的过渡钩子，可以定义不同阶段的动画效果。
2. 在上述代码中，通过`name`属性指定过渡效果为`slide`，实现左右滑动的切换效果。
3. @before-enter钩子函数可以在进入过渡之前设置元素的初始状态；@leave钩子函数可以在离开过渡时设置元素的最终状态。通过这两个钩子函数，实现了前一个元素离开过渡后再显示另一个元素的效果。
4. 要注意@enter钩子函数中，el.offsetHeight这行代码的作用是强制触发一次重绘，确保浏览器能应用`opacity:0`的样式，如果你的元素无法正常显示，可能是缺少这行代码。