53 lines
1.8 KiB
Plaintext
53 lines
1.8 KiB
Plaintext
|
<view class="animation-overlay box-{{boxType}} {{show ? 'visible' : ''}}" wx:if="{{show}}">
|
|||
|
|
|
|||
|
|
<!-- ═══ Act 1: 光晕扩散 + 背景变暗 ═══ -->
|
|||
|
|
<view class="bg-dimmer {{act >= 1 ? 'active' : ''}}"></view>
|
|||
|
|
|
|||
|
|
<view class="act1-glow-ring {{act >= 1 ? 'active' : ''}}">
|
|||
|
|
<view class="glow-inner"></view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- ═══ 盲盒主体 + 盒盖 ═══ -->
|
|||
|
|
<view class="box-stage {{act >= 1 ? 'active' : ''}}">
|
|||
|
|
|
|||
|
|
<!-- 盒盖（Act2 飞起） -->
|
|||
|
|
<view class="box-lid {{act >= 2 ? 'active' : ''}}">
|
|||
|
|
<view class="lid-top"></view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 金色光芒（Act2 从盒缝透出） -->
|
|||
|
|
<view class="golden-light {{act >= 2 ? 'active' : ''}}"></view>
|
|||
|
|
|
|||
|
|
<!-- 盒体 -->
|
|||
|
|
<view class="box-body {{act >= 2 ? 'compressed' : ''}}">
|
|||
|
|
<text class="box-emoji">{{boxEmoji}}</text>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 粒子（Act2 溅射） -->
|
|||
|
|
<view class="spark-particles {{act >= 2 ? 'active' : ''}}">
|
|||
|
|
<view class="spark s1">{{sparkEmoji}}</view>
|
|||
|
|
<view class="spark s2">{{sparkEmoji}}</view>
|
|||
|
|
<view class="spark s3">{{sparkEmoji}}</view>
|
|||
|
|
<view class="spark s4">{{sparkEmoji}}</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- ═══ Act 2: 白色闪屏过渡 ═══ -->
|
|||
|
|
<view class="act2-mask {{act >= 2 ? 'active' : ''}}"></view>
|
|||
|
|
|
|||
|
|
<!-- ═══ Act 3: 内容承载层（弹性弹出） ═══ -->
|
|||
|
|
<view class="act3-content {{act >= 3 ? 'active' : ''}}">
|
|||
|
|
<view class="content-inner">
|
|||
|
|
<slot></slot>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- ═══ 彩带纸屑（Act3 收尾） ═══ -->
|
|||
|
|
<view class="confetti-stage {{act >= 3 ? 'active' : ''}}">
|
|||
|
|
<view class="confetti c1" wx:for="{{confettiColors}}" wx:key="*this"
|
|||
|
|
style="--c:{{item}}; --x:{{10 + index * 22}}%; --d:{{0.8 + index * 0.15}}s;">
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
</view>
|