diff --git a/plugins/plugin-md-power/src/client/components/Annotation.vue b/plugins/plugin-md-power/src/client/components/Annotation.vue
index 42ecd476..263c945f 100644
--- a/plugins/plugin-md-power/src/client/components/Annotation.vue
+++ b/plugins/plugin-md-power/src/client/components/Annotation.vue
@@ -2,6 +2,8 @@
 import { onClickOutside, useEventListener } from '@vueuse/core'
 import { computed, nextTick, ref, useTemplateRef, watch } from 'vue'
 
+import '@vuepress/helper/transition/fade-in.css'
+
 const props = defineProps<{
   label: string
   total: number
@@ -44,10 +46,15 @@ useEventListener('scroll', updatePosition, { passive: true })
 </script>
 
 <template>
-  <span class="vp-annotation ignore-header" :class="{ active, [label]: true }" :aria-label="label">
-    <span ref="button" class="vpi-annotation" @click="active = !active" />
+  <span class="vp-annotation ignore-header" :class="{ active, [label]: true }">
+    <span
+      ref="button"
+      :aria-label="label"
+      class="vpi-annotation"
+      @click="active = !active"
+    />
     <ClientOnly>
-      <Transition name="fade">
+      <Transition name="fade-in">
         <div
           v-show="active" ref="popover"
           class="annotations-popover" :class="{ list: list.length > 1 }"
@@ -73,8 +80,8 @@ useEventListener('scroll', updatePosition, { passive: true })
   position: relative;
   top: -2px;
   z-index: 2;
-  width: 1.2em;
-  height: 1.2em;
+  width: 1.5em;
+  height: 1.5em;
   color: currentcolor;
   cursor: pointer;
   opacity: 0.5;
diff --git a/plugins/plugin-md-power/src/client/components/VPCollapseItem.vue b/plugins/plugin-md-power/src/client/components/VPCollapseItem.vue
index b08eabda..7a28022e 100644
--- a/plugins/plugin-md-power/src/client/components/VPCollapseItem.vue
+++ b/plugins/plugin-md-power/src/client/components/VPCollapseItem.vue
@@ -1,8 +1,10 @@
 <script setup lang="ts">
 import type { Ref } from 'vue'
+import { FadeInExpandTransition } from '@vuepress/helper/client'
 import { inject, ref, watch } from 'vue'
 import { INJECT_COLLAPSE_KEY } from '../options.js'
-import VPFadeInExpandTransition from './VPFadeInExpandTransition.vue'
+
+import '@vuepress/helper/transition/fade-in-height-expand.css'
 
 const props = defineProps<{
   expand?: boolean
@@ -54,13 +56,13 @@ function toggle() {
         <slot name="title" />
       </p>
     </div>
-    <VPFadeInExpandTransition>
+    <FadeInExpandTransition>
       <div v-show="expand" class="vp-collapse-content">
         <div class="vp-collapse-content-inner">
           <slot />
         </div>
       </div>
-    </VPFadeInExpandTransition>
+    </FadeInExpandTransition>
   </div>
 </template>
 
diff --git a/plugins/plugin-md-power/src/client/components/VPDemoBasic.vue b/plugins/plugin-md-power/src/client/components/VPDemoBasic.vue
index 9da098f4..be5726bc 100644
--- a/plugins/plugin-md-power/src/client/components/VPDemoBasic.vue
+++ b/plugins/plugin-md-power/src/client/components/VPDemoBasic.vue
@@ -1,9 +1,11 @@
 <script setup lang="ts">
+import { FadeInExpandTransition } from '@vuepress/helper/client'
 import { useResizeObserver } from '@vueuse/core'
 import { useTemplateRef, watch } from 'vue'
 import { ClientOnly, onContentUpdated } from 'vuepress/client'
 import { useExpand } from '../composables/demo.js'
 
+import '@vuepress/helper/transition/fade-in-height-expand.css'
 import '../styles/demo.css'
 
 const props = defineProps<{
@@ -69,10 +71,14 @@ if (props.type === 'vue' && !__VUEPRESS_SSR__) {
       </p>
     </div>
     <div class="demo-ctrl">
-      <span class="vpi-demo-code" @click="toggleCode" />
-    </div>
-    <div v-show="showCode" class="demo-code">
-      <slot name="code" />
+      <button type="button" aria-label="Toggle Code" @click="toggleCode">
+        <span class="vpi-demo-code" />
+      </button>
     </div>
+    <FadeInExpandTransition>
+      <div v-show="showCode" class="demo-code">
+        <slot name="code" />
+      </div>
+    </FadeInExpandTransition>
   </div>
 </template>
diff --git a/plugins/plugin-md-power/src/client/components/VPDemoNormal.vue b/plugins/plugin-md-power/src/client/components/VPDemoNormal.vue
index bfb219cf..8e400cde 100644
--- a/plugins/plugin-md-power/src/client/components/VPDemoNormal.vue
+++ b/plugins/plugin-md-power/src/client/components/VPDemoNormal.vue
@@ -1,8 +1,11 @@
 <script setup lang="ts">
 import type { DemoConfig } from '../composables/demo.js'
+import { FadeInExpandTransition } from '@vuepress/helper/client'
 import { useTemplateRef } from 'vue'
 import { useExpand, useFence, useNormalDemo, useResources } from '../composables/demo.js'
 
+import '@vuepress/helper/transition/fade-in.css'
+import '@vuepress/helper/transition/fade-in-height-expand.css'
 import '../styles/demo.css'
 
 const props = defineProps<{
@@ -91,7 +94,7 @@ const data = useFence(
       </div>
       <div v-if="resources.length" class="demo-resources">
         <span ref="resourcesEl" class="vpi-demo-resources" title="Resources" aria-label="Resources" @click="toggleResources" />
-        <Transition name="fade">
+        <Transition name="fade-in">
           <div v-show="showResources" class="demo-resources-container">
             <div v-for="{ name, items } in resources" :key="name" class="demo-resources-list">
               <p>{{ name }}</p>
@@ -104,10 +107,14 @@ const data = useFence(
           </div>
         </Transition>
       </div>
-      <span class="vpi-demo-code" @click="toggleCode" />
-    </div>
-    <div v-show="showCode" ref="fence" class="demo-code">
-      <slot />
+      <button type="button" aria-label="Toggle Code" @click="toggleCode">
+        <span class="vpi-demo-code" />
+      </button>
     </div>
+    <FadeInExpandTransition>
+      <div v-show="showCode" ref="fence" class="demo-code">
+        <slot />
+      </div>
+    </FadeInExpandTransition>
   </div>
 </template>
diff --git a/plugins/plugin-md-power/src/client/components/VPFadeInExpandTransition.vue b/plugins/plugin-md-power/src/client/components/VPFadeInExpandTransition.vue
deleted file mode 100644
index 78b55107..00000000
--- a/plugins/plugin-md-power/src/client/components/VPFadeInExpandTransition.vue
+++ /dev/null
@@ -1,154 +0,0 @@
-<script setup lang="ts">
-import { Transition, TransitionGroup } from 'vue'
-
-const props = defineProps<{
-  group?: boolean
-  appear?: boolean
-  mode?: 'in-out' | 'out-in' | 'default'
-  onLeave?: () => void
-  onAfterLeave?: () => void
-  onAfterEnter?: () => void
-  width?: boolean
-}>()
-
-function handleBeforeLeave(el: HTMLElement): void {
-  if (props.width) {
-    el.style.maxWidth = `${el.offsetWidth}px`
-  }
-  else {
-    el.style.maxHeight = `${el.offsetHeight}px`
-  }
-  void el.offsetWidth
-}
-
-function handleLeave(el: HTMLElement): void {
-  if (props.width) {
-    el.style.maxWidth = '0'
-  }
-  else {
-    el.style.maxHeight = '0'
-  }
-  void el.offsetWidth
-  props.onLeave?.()
-}
-
-function handleAfterLeave(el: HTMLElement): void {
-  if (props.width) {
-    el.style.maxWidth = ''
-  }
-  else {
-    el.style.maxHeight = ''
-  }
-  props.onAfterLeave?.()
-}
-
-function handleEnter(el: HTMLElement): void {
-  el.style.transition = 'none'
-  if (props.width) {
-    const memorizedWidth = el.offsetWidth
-    el.style.maxWidth = '0'
-    void el.offsetWidth
-    el.style.transition = ''
-    el.style.maxWidth = `${memorizedWidth}px`
-  }
-  else {
-    const memorizedHeight = el.offsetHeight
-    el.style.maxHeight = '0'
-    void el.offsetWidth
-    el.style.transition = ''
-    el.style.maxHeight = `${memorizedHeight}px`
-  }
-  void el.offsetWidth
-}
-
-function handleAfterEnter(el: HTMLElement): void {
-  if (props.width) {
-    el.style.maxWidth = ''
-  }
-  else {
-    el.style.maxHeight = ''
-  }
-  props.onAfterEnter?.()
-}
-</script>
-
-<template>
-  <component
-    :is="group ? TransitionGroup : Transition"
-    :name="width ? 'fade-in-width-expand' : 'fade-in-height-expand'"
-    :mode
-    :appear
-    @enter="handleEnter"
-    @after-enter="handleAfterEnter"
-    @before-leave="handleBeforeLeave"
-    @leave="handleLeave"
-    @after-leave="handleAfterLeave"
-  >
-    <slot />
-  </component>
-</template>
-
-<style>
-.fade-in-height-expand-leave-from,
-.fade-in-height-expand-enter-to,
-.fade-in-width-expand-leave-from,
-.fade-in-width-expand-enter-to {
-  opacity: 1;
-}
-
-.fade-in-height-expand-leave-to,
-.fade-in-height-expand-enter-from {
-  padding-top: 0 !important;
-  padding-bottom: 0 !important;
-  margin-top: 0 !important;
-  margin-bottom: 0 !important;
-  opacity: 0;
-}
-
-.fade-in-height-expand-leave-active {
-  overflow: hidden;
-  transition:
-    max-height cubic-bezier(0.4, 0, 0.2, 1) 0.3s,
-    opacity cubic-bezier(0, 0, 0.2, 1) 0.3s,
-    margin-top cubic-bezier(0.4, 0, 0.2, 1) 0.3s,
-    margin-bottom cubic-bezier(0.4, 0, 0.2, 1) 0.3s,
-    padding-top cubic-bezier(0.4, 0, 0.2, 1) 0.3s,
-    padding-bottom cubic-bezier(0.4, 0, 0.2, 1) 0.3s;
-}
-
-.fade-in-height-expand-enter-active {
-  overflow: hidden;
-  transition:
-    max-height cubic-bezier(0.4, 0, 0.2, 1) 0.3s,
-    opacity cubic-bezier(0.4, 0, 1, 1) 0.3s,
-    margin-top cubic-bezier(0.4, 0, 0.2, 1) 0.3s,
-    margin-bottom cubic-bezier(0.4, 0, 0.2, 1) 0.3s,
-    padding-top cubic-bezier(0.4, 0, 0.2, 1) 0.3s,
-    padding-bottom cubic-bezier(0.4, 0, 0.2, 1) 0.3s;
-}
-
-.fade-in-width-expand-leave-to,
-.fade-in-width-expand-enter-from {
-  margin-right: 0 !important;
-  margin-left: 0 !important;
-  opacity: 0 !important;
-}
-
-.fade-in-width-expand-leave-active {
-  overflow: hidden;
-  transition:
-    max-width cubic-bezier(0.4, 0, 0.2, 1) 0.2s 0.1s,
-    opacity cubic-bezier(0.4, 0, 0.2, 1) 0.2s,
-    margin-right cubic-bezier(0.4, 0, 0.2, 1) 0.2s 0.1s,
-    margin-left cubic-bezier(0.4, 0, 0.2, 1) 0.2s 0.1s;
-}
-
-.fade-in-width-expand-enter-active {
-  overflow: hidden;
-  transition:
-    max-width cubic-bezier(0.4, 0, 0.2, 1) 0.2s,
-    opacity cubic-bezier(0.4, 0, 0.2, 1) 0.2s 0.1s,
-    margin-right cubic-bezier(0.4, 0, 0.2, 1) 0.2s,
-    margin-left cubic-bezier(0.4, 0, 0.2, 1) 0.2s;
-}
-</style>
diff --git a/plugins/plugin-md-power/src/client/index.ts b/plugins/plugin-md-power/src/client/index.ts
index e2068e30..72593733 100644
--- a/plugins/plugin-md-power/src/client/index.ts
+++ b/plugins/plugin-md-power/src/client/index.ts
@@ -1,3 +1 @@
 export * from '../shared/index.js'
-
-export { default as VPFadeInExpandTransition } from './components/VPFadeInExpandTransition.vue'
diff --git a/theme/src/client/components/Blog/VPBlogExtract.vue b/theme/src/client/components/Blog/VPBlogExtract.vue
index ea68a092..10e0f744 100644
--- a/theme/src/client/components/Blog/VPBlogExtract.vue
+++ b/theme/src/client/components/Blog/VPBlogExtract.vue
@@ -7,6 +7,8 @@ import { isLinkHttp } from 'vuepress/shared'
 import { useBlogExtract, useData } from '../../composables/index.js'
 import { inBrowser } from '../../utils/index.js'
 
+import '@vuepress/helper/transition/fade-in.css'
+
 const { theme } = useData()
 const route = useRoute()
 
@@ -60,7 +62,7 @@ const showBlogExtract = computed(() => {
     <div class="vp-blog-extract" @click="open = !open">
       <span class="vpi-blog-ext icon" />
     </div>
-    <Transition name="fade">
+    <Transition name="fade-in">
       <div v-show="open" class="blog-modal" @click.self="open = false">
         <div class="blog-modal-container" :class="{ open: lazyOpen }">
           <slot name="blog-extract-before" />
@@ -154,17 +156,6 @@ const showBlogExtract = computed(() => {
   z-index: var(--vp-z-index-overlay);
   width: 100%;
   background-color: rgba(0, 0, 0, 0.3);
-  opacity: 1;
-}
-
-.blog-modal.fade-enter-from,
-.blog-modal.fade-leave-to {
-  opacity: 0;
-}
-
-.blog-modal.fade-leave-active,
-.blog-modal.fade-enter-active {
-  transition: opacity 0.5s cubic-bezier(0.19, 1, 0.22, 1);
 }
 
 .blog-modal-container {
diff --git a/theme/src/client/components/Nav/VPNavScreen.vue b/theme/src/client/components/Nav/VPNavScreen.vue
index 6c89ad37..b969b85c 100644
--- a/theme/src/client/components/Nav/VPNavScreen.vue
+++ b/theme/src/client/components/Nav/VPNavScreen.vue
@@ -6,6 +6,8 @@ import VPNavScreenTranslates from '@theme/Nav/VPNavScreenTranslations.vue'
 import { useScrollLock } from '@vueuse/core'
 import { inBrowser } from '../../utils/index.js'
 
+import '@vuepress/helper/transition/fade-in.css'
+
 defineProps<{
   open: boolean
 }>()
@@ -15,7 +17,7 @@ const isLocked = useScrollLock(inBrowser ? document.body : null)
 
 <template>
   <Transition
-    name="fade"
+    name="fade-in"
     @enter="isLocked = true"
     @after-leave="isLocked = false"
   >
diff --git a/theme/src/client/components/VPBackToTop.vue b/theme/src/client/components/VPBackToTop.vue
index ec319513..34f31799 100644
--- a/theme/src/client/components/VPBackToTop.vue
+++ b/theme/src/client/components/VPBackToTop.vue
@@ -3,6 +3,8 @@ import { useElementSize, useWindowScroll, useWindowSize } from '@vueuse/core'
 import { computed, onMounted, ref, shallowRef, watch } from 'vue'
 import { useData } from '../composables/index.js'
 
+import '@vuepress/helper/transition/fade-in.css'
+
 const body = shallowRef<HTMLElement | null>()
 const { height: bodyHeight } = useElementSize(body)
 const { height: windowHeight } = useWindowSize()
@@ -58,7 +60,7 @@ function handleClick() {
 </script>
 
 <template>
-  <Transition name="fade">
+  <Transition name="fade-in">
     <button
       v-show="!mustHidden && (show || isScrolling)"
       type="button"
diff --git a/theme/src/client/components/VPBackdrop.vue b/theme/src/client/components/VPBackdrop.vue
index 51730c11..3edc23a3 100644
--- a/theme/src/client/components/VPBackdrop.vue
+++ b/theme/src/client/components/VPBackdrop.vue
@@ -1,11 +1,13 @@
 <script lang="ts" setup>
+import '@vuepress/helper/transition/fade-in.css'
+
 defineProps<{
   show: boolean
 }>()
 </script>
 
 <template>
-  <Transition name="fade">
+  <Transition name="fade-in">
     <div v-if="show" class="vp-backdrop" />
   </Transition>
 </template>
diff --git a/theme/src/client/components/VPBulletin.vue b/theme/src/client/components/VPBulletin.vue
index d37974e5..012074f0 100644
--- a/theme/src/client/components/VPBulletin.vue
+++ b/theme/src/client/components/VPBulletin.vue
@@ -2,6 +2,7 @@
 import { hasGlobalComponent } from '@vuepress/helper/client'
 import { resolveComponent } from 'vue'
 import { useBulletinControl } from '../composables/index.js'
+import '@vuepress/helper/transition/fade-in-scale-up.css'
 
 const UserBulletin = hasGlobalComponent('Bulletin') ? resolveComponent('Bulletin') : null
 const UserBulletinContent = hasGlobalComponent('BulletinContent') ? resolveComponent('BulletinContent') : null
@@ -10,25 +11,27 @@ const { bulletin, showBulletin, enableBulletin, close } = useBulletinControl()
 </script>
 
 <template>
-  <component :is="UserBulletin" v-if="UserBulletin && enableBulletin && showBulletin" class="vp-bulletin" />
-  <div
-    v-else-if="bulletin && enableBulletin && showBulletin"
-    class="vp-bulletin preset" :class="{
-      border: bulletin.border ?? true,
-      [bulletin.layout ?? 'top-right']: true,
-    }"
-  >
-    <button type="button" class="close" @click="close">
-      <span class="vpi-close" />
-    </button>
-    <slot name="bulletin-content">
-      <h2 v-if="bulletin.title" v-html="bulletin.title" />
-      <div class="container">
-        <component :is="UserBulletinContent" v-if="UserBulletinContent" class="content vp-doc" />
-        <div v-else-if="bulletin.content" class="content vp-doc" v-html="bulletin.content" />
-      </div>
-    </slot>
-  </div>
+  <Transition name="fade-in-scale-up">
+    <component :is="UserBulletin" v-if="UserBulletin && enableBulletin && showBulletin" class="vp-bulletin" />
+    <div
+      v-else-if="bulletin && enableBulletin && showBulletin"
+      class="vp-bulletin preset" :class="{
+        border: bulletin.border ?? true,
+        [bulletin.layout ?? 'top-right']: true,
+      }"
+    >
+      <button type="button" class="close" @click="close">
+        <span class="vpi-close" />
+      </button>
+      <slot name="bulletin-content">
+        <h2 v-if="bulletin.title" v-html="bulletin.title" />
+        <div class="container">
+          <component :is="UserBulletinContent" v-if="UserBulletinContent" class="content vp-doc" />
+          <div v-else-if="bulletin.content" class="content vp-doc" v-html="bulletin.content" />
+        </div>
+      </slot>
+    </div>
+  </Transition>
 </template>
 
 <style>
diff --git a/theme/src/client/components/VPLocalNavOutlineDropdown.vue b/theme/src/client/components/VPLocalNavOutlineDropdown.vue
index e4ba0d31..89879054 100644
--- a/theme/src/client/components/VPLocalNavOutlineDropdown.vue
+++ b/theme/src/client/components/VPLocalNavOutlineDropdown.vue
@@ -5,6 +5,8 @@ import { onClickOutside } from '@vueuse/core'
 import { nextTick, ref, watch } from 'vue'
 import { useData } from '../composables/index.js'
 
+import '@vuepress/helper/transition/fade-in-scale-up.css'
+
 const props = defineProps<{
   headers: MenuItem[]
   navHeight: number
@@ -56,7 +58,7 @@ function scrollToTop() {
     <button v-else @click="scrollToTop">
       {{ theme.returnToTopLabel || 'Return to top' }}
     </button>
-    <Transition name="flyout">
+    <Transition name="fade-in-scale-up">
       <div v-if="open" ref="items" class="items" @click="onItemClick">
         <div class="header">
           <a class="top-link" href="#" @click="scrollToTop">
@@ -146,18 +148,4 @@ function scrollToTop() {
   padding: 8px 0;
   background-color: var(--vp-c-bg-soft);
 }
-
-.flyout-enter-active {
-  transition: all 0.2s ease-out;
-}
-
-.flyout-leave-active {
-  transition: all 0.15s ease-in;
-}
-
-.flyout-enter-from,
-.flyout-leave-to {
-  opacity: 0;
-  transform: translateY(-16px);
-}
 </style>
diff --git a/theme/src/client/styles/utils.css b/theme/src/client/styles/utils.css
index 9e646f3d..41ae252e 100644
--- a/theme/src/client/styles/utils.css
+++ b/theme/src/client/styles/utils.css
@@ -17,21 +17,6 @@
 }
 
 /* ----------------- Transition ------------------------ */
-.fade-enter-active {
-  transition: 0.25s ease !important;
-  transition-property: opacity;
-}
-
-.fade-leave-active {
-  transition: 0.25s cubic-bezier(0, 1, 0.3, 1) !important;
-  transition-property: opacity;
-}
-
-.fade-enter-from,
-.fade-leave-to {
-  opacity: 0;
-}
-
 .fade-slide-y-enter-active {
   transition: 0.15s ease !important;
   transition-property: opacity, transform;