前言：
继续记录，在上篇文章中，弹出框遮罩层在ios上没有正确的铺盖全屏，是因为机型的原因，也和我们的代码结构有相关的问题。今天再来展示另外一个奇葩的问题。
这次我使用了在本篇博客中的弹出框组件CustomDialog.vue。记录uni-app横屏项目：自定义弹出框-CSDN博客
以及在这篇博客中的CustomItem.vue组件。
uni-app：踩坑路---scroll-view内使用fixed定位，无效的问题-CSDN博客
CustomDialog.vue
<template>
<view class="dialog-overlay" v-if="visible" :style="{ zIndex: zIndex }" @tap="closeMask">
<view class="dialog" v-if="dialogVisible" :style="[getStyle]" :class="[showAnimate ? 'bounce-enter-active' : 'bounce-leave-active']" @tap.stop>
<view class="close" v-if="showClose" @tap="close">
<view class="iconfont icon-guanbi"></view>
</view>
<slot></slot>
</view>
</view>
</template>
<script>
export default {
name: 'CustomDialog',
props: {
visible: {
type: Boolean,
default: false
},
width: {
type: String,
default: 'auto'
},
height: {
type: String,
default: 'auto'
},
radius: {
type: String,
default: '16rpx'
},
bgColor: {
type: String,
default: '#fff'
},
customStyle: {
type: Object,
default: () => ({})
},
/* 是否展示右上角关闭按钮 */
showClose: {
type: Boolean,
default: true
},
/* 是否点击遮罩层可以关闭弹出框 */
maskCloseAble: {
type: Boolean,
default: true
},
/* 弹出框层级 */
zIndex: {
type: Number,
default: 999
}
},
data() {
return {
dialogVisible: this.visible,
showAnimate: this.visible,
timer: null
};
},
beforeDestroy() {
this.clearTimeout();
},
watch: {
visible: {
handler(val) {
setTimeout(() => {
this.dialogVisible = val;
this.showAnimate = val;
}, 50);
},
immediate: true
}
},
computed: {
getStyle() {
return {
width: this.width,
height: this.height,
background: this.bgColor,
borderRadius: this.radius,
...this.customStyle
};
}
},
methods: {
clearTimeout() {
if (this.timer) {
clearTimeout(this.timer);
this.timer = null;
}
},
closeMask() {
if (!this.maskCloseAble) return;
this.close();
},
close() {
this.closeAnimate();
this.timer = setTimeout(() => {
this.$emit('close');
this.$emit('update:visible', false);
}, 500);
},
closeAnimate() {
this.showAnimate = false;
this.clearTimeout();
}
}
};
</script>
<style lang="scss" scoped>
.dialog-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
align-items: center;
justify-content: center;
background-color: rgba(#000, 0.3);
}
.dialog {
position: relative;
border-radius: 16px;
padding: 20rpx;
padding-bottom: 14rpx;
margin-left: -50rpx;
opacity: 0;
.close {
position: absolute;
width: 28rpx;
height: 28rpx;
border-radius: 50%;
background-color: rgba(#000, 0.6);
top: -10rpx;
right: -10rpx;
.icon {
width: 10rpx;
height: 10rpx;
}
}
}
/* 打开与关闭的类名 */
.bounce-enter-active {
animation: bounceIn 0.5s both;
}
.bounce-leave-active {
animation: bounceOut 0.5s both;
}
/* 定义bounceIn动画 */
@keyframes bounceIn {
0% {
opacity: 0;
transform: scale(0);
}
50% {
opacity: 1;
transform: scale(1.2);
}
70% {
opacity: 1;
transform: scale(0.9);
}
100% {
opacity: 1;
transform: scale(1);
}
}
/* 定义 bounceOut 动画 */
@keyframes bounceOut {
0% {
opacity: 1;
transform: scale(1);
}
25% {
opacity: 1;
transform: scale(0.95);
}
50% {
opacity: 0;
transform: scale(1.1);
}
100% {
opacity: 0;
transform: scale(0);
}
}
.icon-guanbi {
color: #94ffd8;
font-size: 16rpx;
}
</style>
CustomItem.vue
<template>
<view class="">
<view class="item" @click="visible = true"></view>
<view class="mask" v-if="visible" @click="visible = false"></view>
</view>
</template>
<script>
export default {
name: 'CustomItem',
data() {
return {
visible: false
};
}
};
</script>
<style lang="scss" scoped>
.item {
width: 100rpx;
height: 100rpx;
background-color: #00aaff;
}
.mask {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(#000, 0.5);
}
</style>
页面使用：
<template>
<view class="index">
<button @click="visible = true">click</button>
<custom-dialog :visible.sync="visible" width="500rpx" height="200rpx">
<view class="list">
<custom-item class="item" v-for="i in 3" :key="i"></custom-item>
</view>
</custom-dialog>
</view>
</template>
<script>
import CustomDialog from '@/components/CustomDialog/index.vue';
import CustomItem from '@/components/CustomItem/index.vue';
export default {
components: {
CustomDialog,
CustomItem
},
data() {
return {
visible: false
};
}
};
</script>
<style lang="scss" scoped>
.index {
width: 100vw;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.list {
padding: 20rpx;
display: flex;
align-items: center;
.item {
margin-right: 20rpx;
}
}
</style>
和上篇文章中不同的是，这次可并没有使用scroll-view组件，只是在弹出框组件内使用了另一个Item组件而已，但是效果却大大出乎了意料 ！
弹出框显示：一切ok
点击蓝色方块，展示一个遮罩层：没想到这个遮罩层他又又又被截断了，没有去正确的铺满全屏。。。这次又是为什么？
经过我一层层的排出，最后得出了一个惊人的结论，居然和我的弹出框组件有关，还是最让人意想不到的css的transform属性。transform对普通元素的N多渲染影响，这篇文章就说明的相当详细。
下面我把所有关于transform都给注释掉了，然后再去尝试点击蓝色方块。
/* 定义bounceIn动画 */
@keyframes bounceIn {
0% {
opacity: 0;
// transform: scale(0);
}
50% {
opacity: 1;
// transform: scale(1.2);
}
70% {
opacity: 1;
// transform: scale(0.9);
}
100% {
opacity: 1;
// transform: scale(1);
}
}
/* 定义 bounceOut 动画 */
@keyframes bounceOut {
0% {
opacity: 1;
// transform: scale(1);
}
25% {
opacity: 1;
// transform: scale(0.95);
}
50% {
opacity: 0;
// transform: scale(1.1);
}
100% {
opacity: 0;
// transform: scale(0);
}
}
ok，彻底告别地球了。。。
既然问题已经找到，那就看怎么解决了。。。
1.不再使用transform属性，改用其他的属性编写动画，当然结论就是会发现动画没有使用transform丝滑就是了。
2.老办法，保留transform属性，但是需要避免在其子元素上使用fixed定位，如果非要使用，那就需要考虑将fixed的元素拿出去，这点其实在VUE3中解决起来很方便。。。毕竟一个teleport就可以直接将元素指定到对应的元素上。