uni-app:踩坑路---关于使用了transform导致fixed定位不生效的问题

前言:

        继续记录,在上篇文章中,弹出框遮罩层在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就可以直接将元素指定到对应的元素上。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/875127.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

《昇思25天学习打卡营第19天|基于MobileNetv2的垃圾分类》

基于MobileNetv2的垃圾分类 本文档主要介绍垃圾分类代码开发的方法。通过读取本地图像数据作为输入&#xff0c;对图像中的垃圾物体进行检测&#xff0c;并且将检测结果图片保存到文件中。 1、实验目的 了解熟悉垃圾分类应用代码的编写&#xff08;Python语言&#xff09;&a…

【C++】:AVL树的深度解析及其实现

目录 前言一&#xff0c;AVL树的概念二&#xff0c;AVL树节点的定义三&#xff0c;AVL树的插入3.1 第一步3.2 第二步 四&#xff0c;AVL树的旋转4.1 右单旋4.2 左单旋4.3 右左双旋4.4 左右双旋4.5 插入代码的完整实现4.6 旋转总结 五&#xff0c;AVL树的验证六&#xff0c;实现…

插入和选择排序

1.1直接插入排序 void InsertSort(int* a, int n) {for (int i 1; i < n - 1; i) {//i的范围要注意的&#xff0c;防止指针越界int end i;int tmp a[end 1];while (end>0) {if (tmp< a[end]) {a[end 1] a[end];//小于就挪动&#xff0c;虽然会覆盖后面空间的值…

【Linux】通过分配虚拟内存的方式来解决因内存不够而导致部署的项目自动挂掉

多个 jar 包项目部署在同一台服务器上&#xff0c;当服务器配置低&#xff0c;内存不足时&#xff0c;有可能出现 nohup java -jar 启动的进程就莫名其妙挂掉的问题。 解决方式&#xff1a; 第一种方法&#xff1a;进行JVM调优可以改善这种情况&#xff0c;但是项目太多&…

【Android】安卓四大组件之广播知识总结

文章目录 动态注册使用BroadcastReceiver监听Intent广播注册Broadcast Receiver 静态注册自定义广播标准广播发送广播定义广播接收器注册广播接收器 有序广播修改发送方法定义第二个广播接收器注册广播接收器广播截断 使用本地广播实践-强制下线使用ActivityCollector管理所有活…

sql注入 mysql 执行命令 sql注入以及解决的办法

我们以前很可能听过一个词语叫做SQL注入攻击&#xff0c;其是威胁我们系统安全的最危险的因素之一&#xff0c;那么到底什么是SQL注入攻击呢&#xff1f;这里我会用一个最经典最简单的例子来跟大家解释一下&#xff1a; 众所周知&#xff0c;我们的sql语句都是有逻辑的&#xf…

STM32之九:ADC模数转换器

目录 1. 简介 2. ADC 2.1 逐次逼近型寄存器SAR 2.2 ADC转换时间 3 ADC框图 3.1 8 bit ADC0809芯片内部框图 3.2 ADC框图 3.2.1 注入通道和规则通道 3.2.2 单次/连续转换模式 3.2.3 扫描模式 3.2.4 外部触发转换 3.2.5 数据对齐 3.2.6 模拟看门狗 4. 总结和ADC驱…

MYSQL ODBC驱动安装时的注意事项

今天想使用MYSQL的ODBC驱动连接数据库。 安装的时候遇到一个大坑&#xff0c;在这里记录一下。 window 64位的操作&#xff0c;要安装64位驱动&#xff0c;这个大家都知道了。 有以下的问题要注意区别的。 1 、windows是64位的&#xff0c;但是开发软件是32位的。 这个时候…

OpenStack Yoga版安装笔记(七)glance练习补充

1、练习场景说明 在OpenStack Yoga版安装笔记&#xff08;五&#xff09;中&#xff0c;glance已经在controller node虚拟机上安装完成&#xff0c;并且已经成功拍摄了快照。 此时&#xff0c;controller node虚机已经安装了keystone、keystone DB、glance、glance DB、OpenSta…

PCL-基于FPFH的SAC-IA结合ICP的点云配准方法

目录 一、相关方法原理1.凸包方法2.FPFH特征描述3.SAC-IA概述4.ICP概述 二、实验代码三、实验结果 一、相关方法原理 点云是在同一空间参考系下表达目标空间分布和目标表面特性的海量点集合&#xff0c;在获取物体表面每个采样点的空间坐标后&#xff0c;得到的是点的集合&…

构建智能运维系统:创新架构与效率优化

随着信息技术的迅猛发展&#xff0c;企业对于运维效率和服务质量的要求越来越高。智能运维系统的设计和实施&#xff0c;不仅能够提升系统可靠性和响应速度&#xff0c;还能有效降低成本和人力投入。本文将深入探讨智能运维系统的架构设计原则和关键技术&#xff0c;为企业在运…

数据结构重置版(概念篇)

本篇文章是对数据结构的重置&#xff0c;且只涉及概念 顺序表与链表的区别 不同点 顺序表 链表 存储空间上 物理上一定连续 逻辑上连续&#xff0c;但物理上不一定连续…

.env.local 配置本地环境变量 用于团队开发

.env.local 用途&#xff1a;.env.local 通常用于存储本地开发环境中的环境变量。这些变量可能包括敏感数据或特定于单个开发者的设置&#xff0c;不应该被提交到版本控制系统中。优先级&#xff1a;在大多数框架中&#xff0c;.env.local 文件中的变量会覆盖其他 .env 文件中…

分类模型的完整流程及Python实现

1、加载函数和数据集 import numpy as np from sklearn.datasets import load_breast_cancer from sklearn.svm import SVC from sklearn.model_selection import train_test_split from sklearn.preprocessing import StandardScaler import matplotlib.pyplot as plt cancer…

linux系统查历史cpu使用数据(使用sar 查询cpu和网络占用最近1个月历史数据)。

一 sar 指令介绍 在 Linux 系统中&#xff0c;sar 是 System Activity Reporter 的缩写&#xff0c;是一个用于收集、报告和保存系统活动信息的工具。它是 sysstat 软件包的一部分&#xff0c;提供了丰富的系统性能数据&#xff0c;包括 CPU、内存、网络、磁盘等使用情况&am…

SQL中的LEFT JOIN、RIGHT JOIN和INNER JOIN

在SQL中&#xff0c;JOIN操作是连接两个或多个数据库表&#xff0c;并根据两个表之间的共同列&#xff08;通常是主键和外键&#xff09;返回数据的重要方法。其中&#xff0c;LEFT JOIN&#xff08;左连接&#xff09;、RIGHT JOIN&#xff08;右连接&#xff09;和INNER JOIN…

《JavaEE篇》--多线程(2)

《JavaEE篇》--多线程(1) 线程安全 线程不安全 我们先来观察一个线程不安全的案例&#xff1a; public class Demo {private static int count 0;public static void main(String[] args) throws InterruptedException {Thread t1 new Thread(() -> {//让count自增5W次…

HarmonyOS网络请求的简单用法,HttpUtil简单封装

请求网络获取数据 点击按钮发送一个post请求&#xff0c;发送一条string由于此处的返回result.data本身就是一个string&#xff0c;因此不需要转换类型 Button(请求网络).margin({ top: 10 }).fontSize(24).fontWeight(FontWeight.Bold).onClick(() > {httpRequestPost(http…

风格迁移开发记录(DCT-Net)

1.DCT-Net部署 阿里旗下的 modelscope社区&#xff0c;丰富的开源风格迁移算法模型 DCT-Net GitHub链接 git clone https://github.com/menyifang/DCT-Net.git cd DCT-Netpython run_sdk.py下载不同风格的模型如下图每个文件夹代表一种风格&#xff0c;有cartoon_bg.pb, car…

C++STL详解(一)——String接口详解(上)!!!

目录 一.string类介绍 二.string类的构造赋值 2.1string类的拷贝和构造函数 2.2深拷贝 三.string类的插入 3.1push_back 3.2append 3.3操作符 3.4insert 四.string的删除 4.1pop_back 4.2erase 五.string的查找 5.1find 5.2rfind 六.string的比较 6.1compare函…