Vue3中的动画过渡实现技巧分享

<template>
  <div>
    <button @click="show = !show">
      Toggle
    </button>
    <transition name="fade">
      <p v-if="show">Hello, I am a transitioning element!</p>
    </transition>
  </div>
</template>

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

<style>
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active in <2.1.8 */ {
  opacity: 0;
}
</style>

<template>
  <div>
    <button @click="toggleAnimation">Rotate</button>
    <transition name="rotate">
      <div v-if="isAnimating" class="box"></div>
    </transition>
  </div>
</template>

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

<style>
.box {
  width: 100px;
  height: 100px;
  background-color: blue;
}

.rotate-enter-active, .rotate-leave-active {
  animation: rotate 1s ease;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
</style>

<template>
  <div>
    <button @click="toggle">Toggle</button>
    <transition @before-enter="beforeEnter" @enter="enter" @leave="leave">
      <div v-if="show" class="box"></div>
    </transition>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: false,
    };
  },
  methods: {
    toggle() {
      this.show = !this.show;
    },
    beforeEnter(el) {
      el.style.opacity = 0;
    },
    enter(el, done) {
      el.offsetHeight; // trigger reflow
      el.style.transition = 'opacity 1s';
      el.style.opacity = 1;
      done();
    },
    leave(el, done) {
      el.style.transition = 'opacity 1s';
      el.style.opacity = 0;
      done();
    },
  },
};
</script>

<style>
.box {
  width: 100px;
  height: 100px;
  background-color: red;
}
</style>

<template>
  <transition :name="name">
    <slot></slot>
  </transition>
</template>

<script>
export default {
  props: {
    name: {
      type: String,
      default: 'fade',
    },
  },
};
</script>

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

<template>
  <div>
    <button @click="toggleStatus">Toggle Status</button>
    <custom-transition name="slide">
      <p v-if="status === 'active'">Active State</p>
      <p v-else>Inactive State</p>
    </custom-transition>
  </div>
</template>

<script>
import { mapState } from 'vuex';
import CustomTransition from './CustomTransition.vue';

export default {
  components: {
    CustomTransition,
  },
  computed: {
    ...mapState(['status']),
  },
  methods: {
    toggleStatus() {
      this.$store.commit('toggleStatus');
    },
  },
};
</script>

<style>
.slide-enter-active, .slide-leave-active {
  transition: transform 0.5s;
}
.slide-enter {
  transform: translateY(-15px);
}
.slide-leave-to {
  transform: translateY(15px);
}
</style>