diff --git a/packages/varlet-ui/src/snackbar/core.less b/packages/varlet-ui/src/snackbar/core.less
index bf1db6c8663..dbd4fc61a5d 100644
--- a/packages/varlet-ui/src/snackbar/core.less
+++ b/packages/varlet-ui/src/snackbar/core.less
@@ -9,6 +9,7 @@
 	top: 0;
 	bottom: 0;
 	pointer-events: none;
+	z-index: 10;
 }
 
 .var-pointer-auto {
@@ -24,6 +25,7 @@
 		right: 0;
 		bottom: 0;
 		transition: all 0.15s cubic-bezier(0, 0, 0.2, 1);
+		z-index: 10;
 
 		&__wrapper {
 			width: 256px;
diff --git a/packages/varlet-ui/src/snackbar/core.vue b/packages/varlet-ui/src/snackbar/core.vue
index c1362634897..a57ca2e0c39 100644
--- a/packages/varlet-ui/src/snackbar/core.vue
+++ b/packages/varlet-ui/src/snackbar/core.vue
@@ -2,17 +2,15 @@
 	<div class="var-snackbar" :style="{ pointerEvents: forbidClick ? 'auto' : 'none' }" v-show="show">
 		<div :class="snackbarClass" :style="snackbarStyle">
 			<div :class="`var-snackbar__content${contentClass ? ` ${contentClass}` : ''}`">
-				<var-loading :type="loadingType" :size="loadingSize" v-if="type === 'loading'" />
-				<slot>
-					{{ content }}
-				</slot>
+				<slot>{{ content }}</slot>
 			</div>
 			<div class="var-snackbar__action">
-				<var-icon v-if="type === 'success'" name="checkbox-marked-circle"></var-icon>
-				<var-icon v-if="type === 'warning'" name="warning"></var-icon>
-				<var-icon v-if="type === 'info'" name="information"></var-icon>
-				<var-icon v-if="type === 'error'" name="error"></var-icon>
-				<slot name="action"></slot>
+				<var-icon v-if="type === 'success'" :transition="200" name="checkbox-marked-circle" />
+				<var-icon v-if="type === 'warning'" :transition="200" name="warning" />
+				<var-icon v-if="type === 'info'" :transition="200" name="information" />
+				<var-icon v-if="type === 'error'" :transition="200" name="error" />
+				<var-loading v-if="type === 'loading'" :type="loadingType" :size="loadingSize" />
+				<slot name="action" />
 			</div>
 		</div>
 	</div>
diff --git a/packages/varlet-ui/src/snackbar/example/index.vue b/packages/varlet-ui/src/snackbar/example/index.vue
index 61dbef1d2a1..c28eb129f77 100644
--- a/packages/varlet-ui/src/snackbar/example/index.vue
+++ b/packages/varlet-ui/src/snackbar/example/index.vue
@@ -3,89 +3,43 @@
 		<div class="snackbar-demo__basic">
 			<app-type>基本使用</app-type>
 			<div class="snackbar-demo__basic-block">
-				<var-button type="primary" size="small" @click="changeValue('show1')">
-					基本使用
-				</var-button>
-				<var-button type="primary" size="small" @click="changeValue('show2')">
-					自定义action
-				</var-button>
-				<var-button type="primary" size="small" @click="changeValue('show3')">
-					垂直排列
-				</var-button>
-				<var-button type="primary" size="small" @click="changeValue('show4')">
-					自定义关闭时间
-				</var-button>
-				<var-button type="primary" size="small" @click="changeMultiple()">
-					切换单例或多例
-				</var-button>
+				<var-button type="primary" size="small" @click="changeValue('show1')"> 基本使用 </var-button>
+				<var-button type="primary" size="small" @click="changeValue('show2')"> 自定义action </var-button>
+				<var-button type="primary" size="small" @click="changeValue('show3')"> 垂直排列 </var-button>
+				<var-button type="primary" size="small" @click="changeValue('show4')"> 自定义关闭时间 </var-button>
+				<var-button type="primary" size="small" @click="changeMultiple()"> 切换单例或多例 </var-button>
 			</div>
 		</div>
 		<div class="snackbar-demo__type">
 			<app-type>snackbar类型</app-type>
 			<div class="snackbar-demo__type-block">
-				<var-button type="primary" size="small" @click="changeValue('show7')">
-					success
-				</var-button>
-				<var-button type="primary" size="small" @click="create('warning')">
-					warning
-				</var-button>
-				<var-button type="primary" size="small" @click="create('info')">
-					info
-				</var-button>
-				<var-button type="primary" size="small" @click="createMethod('error')">
-					error
-				</var-button>
-				<var-button
-					type="primary"
-					size="small"
-					@click="createMethod('loading')"
-				>
-					loading
-				</var-button>
+				<var-button type="primary" size="small" @click="changeValue('show7')"> success </var-button>
+				<var-button type="primary" size="small" @click="create('warning')"> warning </var-button>
+				<var-button type="primary" size="small" @click="create('info')"> info </var-button>
+				<var-button type="primary" size="small" @click="createMethod('error')"> error </var-button>
+				<var-button type="primary" size="small" @click="createMethod('loading')"> loading </var-button>
 			</div>
 		</div>
 		<div class="snackbar-demo__position">
 			<app-type>snackbar位置</app-type>
 			<div class="snackbar-demo__position-block">
-				<var-button type="primary" size="small" @click="createPosition('top')">
-					top
-				</var-button>
-				<var-button
-					type="primary"
-					size="small"
-					@click="createPosition('center')"
-				>
-					center
-				</var-button>
-				<var-button
-					type="primary"
-					size="small"
-					@click="createPosition('bottom')"
-				>
-					bottom
-				</var-button>
+				<var-button type="primary" size="small" @click="createPosition('top')"> top </var-button>
+				<var-button type="primary" size="small" @click="createPosition('center')"> center </var-button>
+				<var-button type="primary" size="small" @click="createPosition('bottom')"> bottom </var-button>
 			</div>
 		</div>
 		<div class="snackbar-demo__others">
 			<app-type>其他配置</app-type>
 			<div class="snackbar-demo__others-block">
-				<var-button type="primary" size="small" @click="changeValue('show8')">
-					自定义内容class
-				</var-button>
-				<var-button type="primary" size="small" @click="changeValue('show9')">
-					不可穿透点击
-				</var-button>
-				<var-button type="primary" size="small" @click="changeValue('show10')">
-					可以穿透滑动
-				</var-button>
+				<var-button type="primary" size="small" @click="changeValue('show8')"> 自定义内容class </var-button>
+				<var-button type="primary" size="small" @click="changeValue('show9')"> 不可穿透点击 </var-button>
+				<var-button type="primary" size="small" @click="changeValue('show10')"> 可以穿透滑动 </var-button>
 			</div>
 		</div>
 		<div class="snackbar-demo__event">
 			<app-type>snackbar事件</app-type>
 			<div class="snackbar-demo__event-block">
-				<var-button type="primary" size="small" @click="changeValue('show11')">
-					打开与关闭回调
-				</var-button>
+				<var-button type="primary" size="small" @click="changeValue('show11')"> 打开与关闭回调 </var-button>
 				<var-button type="primary" size="small" @click="changeValue('show12')">
 					打开动画与关闭动画结束时回调
 				</var-button>
@@ -99,18 +53,14 @@
 		<var-snackbar v-model:show="show2">
 			{{ text }}
 			<template #action>
-				<var-button type="primary" size="small" @click="show2 = !show2">
-					close
-				</var-button>
+				<var-button type="primary" size="small" @click="show2 = !show2"> close </var-button>
 			</template>
 		</var-snackbar>
 
 		<var-snackbar v-model:show="show3" :vertical="true">
 			{{ text }}
 			<template #action>
-				<var-button type="primary" size="small" @click="show3 = !show3">
-					close
-				</var-button>
+				<var-button type="primary" size="small" @click="show3 = !show3"> close </var-button>
 			</template>
 		</var-snackbar>
 
@@ -151,7 +101,7 @@ export default defineComponent({
 		[Button.name]: Button,
 	},
 	setup() {
-		const text: Ref<string> = ref("Hello, I'm a snackbar-core")
+		const text: Ref<string> = ref("Hello, I'm a snackbar")
 		const isAllowMultiple: Ref<boolean> = ref(true)
 		const shows: any = reactive({
 			show1: false,
@@ -171,7 +121,7 @@ export default defineComponent({
 
 		const create = (type: any) => {
 			const snackbar: any = Snackbar({
-				content: "Hello, I'm a snackbar-core",
+				content: "Hello, I'm a snackbar",
 				type,
 			})
 			setTimeout(function () {
@@ -181,14 +131,22 @@ export default defineComponent({
 
 		const createMethod = (type: SnackbarType) => {
 			Snackbar[type]({
-				content: "Hello, I'm a snackbar-core",
+				content: "Hello, I'm a snackbar",
 				forbidClick: type === 'loading',
+				loadingSize: 'small',
 			})
+			if (type === 'loading') {
+				setTimeout(() => {
+					Snackbar.success({
+						content: "Hello, I'm a snackbar",
+					})
+				}, 3000)
+			}
 		}
 
 		const createPosition = (position: 'top' | 'center' | 'bottom') => {
 			Snackbar({
-				content: "Hello, I'm a snackbar-core",
+				content: "Hello, I'm a snackbar",
 				position,
 			})
 		}
diff --git a/packages/varlet-ui/src/utils/elements.ts b/packages/varlet-ui/src/utils/elements.ts
index 3be338f79fd..9d2a381a0c8 100644
--- a/packages/varlet-ui/src/utils/elements.ts
+++ b/packages/varlet-ui/src/utils/elements.ts
@@ -1,7 +1,3 @@
-import { inBrowser } from './shared'
-
-const root = (inBrowser ? window : global) as Window
-
 export function getTop(element: HTMLElement): number {
 	const { top } = element.getBoundingClientRect()
 
@@ -88,5 +84,5 @@ export function remToPx(rem: string | number): number {
 }
 
 export function requestAnimationFrame(fn: FrameRequestCallback): number {
-	return root.requestAnimationFrame ? root.requestAnimationFrame(fn) : root.setTimeout(fn, 16)
+	return window.requestAnimationFrame ? window.requestAnimationFrame(fn) : window.setTimeout(fn, 16)
 }
diff --git a/packages/varlet-ui/src/utils/shared.ts b/packages/varlet-ui/src/utils/shared.ts
index 4db0881275f..2283b416849 100644
--- a/packages/varlet-ui/src/utils/shared.ts
+++ b/packages/varlet-ui/src/utils/shared.ts
@@ -8,8 +8,6 @@ export interface CacheInstance<T> {
 	remove(key: T): void
 }
 
-export const inBrowser = typeof window !== 'undefined'
-
 export const isString = (val: unknown): val is string => typeof val === 'string'
 
 export const isNumber = (val: unknown): val is number => typeof val === 'number'