67 lines
1.6 KiB
Vue
67 lines
1.6 KiB
Vue
<template>
|
||
<!-- 进入动效外壳：fade / slide / zoom / none -->
|
||
<view class="theme-enter" :class="'theme-enter--' + transition" :style="enterStyle">
|
||
<slot />
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { getActiveLayout, getActiveVars } from '@/utils/theme'
|
||
|
||
export default {
|
||
name: 'ThemeEnter',
|
||
props: {
|
||
/** 覆盖 effect.transition */
|
||
type: { type: String, default: '' },
|
||
delay: { type: [Number, String], default: 0 },
|
||
},
|
||
computed: {
|
||
transition() {
|
||
if (this.type) return this.type
|
||
const effect = (getActiveLayout().effect) || {}
|
||
return effect.transition || 'fade'
|
||
},
|
||
enterStyle() {
|
||
const v = getActiveVars()
|
||
const base = v['--motion-base'] || '320ms'
|
||
const easing = v['--motion-easing'] || 'ease'
|
||
return {
|
||
animationDuration: base,
|
||
animationTimingFunction: easing,
|
||
animationDelay: `${Number(this.delay) || 0}ms`,
|
||
}
|
||
},
|
||
},
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.theme-enter--none {
|
||
animation: none;
|
||
}
|
||
.theme-enter--fade {
|
||
animation-name: themeFadeIn;
|
||
animation-fill-mode: both;
|
||
}
|
||
.theme-enter--slide {
|
||
animation-name: themeSlideUp;
|
||
animation-fill-mode: both;
|
||
}
|
||
.theme-enter--zoom {
|
||
animation-name: themeZoomIn;
|
||
animation-fill-mode: both;
|
||
}
|
||
@keyframes themeFadeIn {
|
||
from { opacity: 0; }
|
||
to { opacity: 1; }
|
||
}
|
||
@keyframes themeSlideUp {
|
||
from { opacity: 0; transform: translateY(24rpx); }
|
||
to { opacity: 1; transform: translateY(0); }
|
||
}
|
||
@keyframes themeZoomIn {
|
||
from { opacity: 0; transform: scale(0.96); }
|
||
to { opacity: 1; transform: scale(1); }
|
||
}
|
||
</style>
|