如何在 vuetify 中制作主题更改动画？

Question

了解我的意思的步骤：

1. 前往 vuetify 网站
2. 单击齿轮图标
3. 选择深色或浅色主题。

当您在不同主题之间切换时，会播放动画。一个圆圈（大致从按钮的位置开始）扩大，最终吞没新主题中的整个屏幕。

我在文档中找不到任何有关如何复制的说明。对我来说，过渡是在颜色逐渐淡入新变体的过程中进行的，但与它们正在发生的情况相比，它看起来相当俗气。

这是vuetify的一个功能吗？我怎样才能复制这种行为？

Answer 1

以下是如何实现此目的的简单示例：

<template>
  <v-app :dark="darkTheme">
    <v-btn @click="toggleTheme">Change Theme</v-btn>
    <v-main>
      <transition name="circle-expand">
        <div :class="themeClass" v-if="isThemeVisible">
          <!-- Your application content here -->
        </div>
      </transition>
    </v-main>
  </v-app>
</template>

<script>
export default {
  data() {
    return {
      darkTheme: false,
      isThemeVisible: true
    };
  },
  computed: {
    themeClass() {
      return {
        'theme--light': !this.darkTheme,
        'theme--dark': this.darkTheme
      };
    }
  },
  methods: {
    toggleTheme() {
      this.isThemeVisible = false; // Hide the content during transition
      setTimeout(() => {
        this.darkTheme = !this.darkTheme; // Toggle theme
        this.isThemeVisible = true; // Show the content after theme change
      }, 500); // Adjust the delay to match the transition duration
    }
  }
};
</script>

<style>
.circle-expand-enter-active,
.circle-expand-leave-active {
  transition: all 0.5s ease;
}

.circle-expand-enter,
.circle-expand-leave-to {
  opacity: 0;
}

.circle-expand-enter {
  transform: scale(0);
}

.circle-expand-leave-to {
  transform: scale(2);
}
</style>

单击该按钮将切换

darkTheme

布尔值，这会将深色或浅色主题应用于整个

Vuetify

应用程序。过渡动画保持不变，以扩大的圆圈效果平滑过渡主题变化。根据需要调整过渡持续时间和计时功能。