位置: IT常识 - 正文

【Vue】踩坑日记:Scoped下动画无效,曾经以为百利而无一害的Scoped,也有自己的限制

编辑:rootadmin
【Vue】踩坑日记:Scoped下动画无效,曾经以为百利而无一害的Scoped,也有自己的限制 文章目录问题描述解决过程玩味Vue Scoped知识点解决方法问题描述

推荐整理分享【Vue】踩坑日记:Scoped下动画无效,曾经以为百利而无一害的Scoped,也有自己的限制,希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:,内容如对您有帮助,希望把文章链接给更多的朋友!

​ 在开发的前期,我清晰的记得使用动画完成了图片放大的效果,当时还写了一篇博文 http://t.csdn.cn/lA9aq上了热榜。可是过了几天之后,这个效果居然“失效了”,我百思不得其解。一度怀疑自己的代码写的有问题,在CSDN等各大博客平台上查找了很久也没找到解决方案。在偶然的尝试下,我发现是scoped影响了动画的效果。真是欲哭无泪,打死我都想不到是scoped的原因。从学习vue的时候就习惯性的在style后面加上scoped,为的是不影响其他组件。曾几何时,我一度以为scoped有百利而无一害。痛定思痛,写下这篇博客,为的是警醒大家不要犯和我一样的错误,同时也提醒自己,对待一个知识点,一定要学透了,不然以后必受不熟悉其的害处。

​ 如果您的时间很宝贵,您可以直接去看解决方法;如果您的时间闲暇,不妨听我掰扯掰扯,所谓前车之"覆",后车之师。

解决过程

这里我看到动画的效果被加上去了,但是动画不生效。一度认为是自己动画代码写错了

悬浮的时候效果也加上了,但是不起作用

尝试删掉一些代码试试,结果变成了沿着X、Y只往一个方向拓展,类似于宽高以左上角为起点放大

想到了style.cssText会覆盖以前的样式,就把悬浮之前的样式也加了上去,结果回到解放前,又失效了。

试一试使用过渡,过渡是可以的(★)

这时候是可以的

然后又改成动画,结果还是不可以。

神来之笔,新建了一个页面,莫名其妙的删掉了scoped,结果就可以了

【Vue】踩坑日记:Scoped下动画无效,曾经以为百利而无一害的Scoped,也有自己的限制

动画可以了

怀疑可能是浏览器的原因,换了个浏览器,清空了一下缓存,结果还是可以。

此时的HomeTwo.vue 文件也莫名其妙的可以了(写了scoped),这时候我反应过来,是因为Test.vue 里面的样式没有写scoped,而两者之间动画的名字是一样的,所以Test.vue 影响了 HomeTwo.vue。当我改变scoped里面动画的名字,使之和Test.vue里面的动画名不一样的时候,HomeTwo的动画效果 也随之失效了

为了更清晰的对比,让加了scoped的放大效果为1.5倍,不加scoped的放大效果为3倍

不加scoped

加了scoped

可以很清晰的看到,二者的放大效果都是3倍,这也就说明了不加scoped的影响了加scoped

玩味

我试了试两者都开启全局模式,动画的名字一致,但是放大的效果不同。结果是

二者的谁影响到谁是不确定的

但是刷新之后,Test.vue总是能够影响HomeTwo.vue

这个原因是什么到现在还没找到。

Vue Scoped知识点

想了解更多的可以去看官网 https://vue-loader.vuejs.org/zh/guide/scoped-css.html

当 <style> 标签有 scoped 属性时,它的 CSS 只作用于当前组件中的元素。这类似于 Shadow DOM 中的样式封装。它有一些注意事项,但不需要任何 polyfill。它通过使用 PostCSS 来实现以下转换:

<style scoped>.example { color: red;}</style><template> <div class="example">hi</div></template>

转换结果:

<style>.example[data-v-f3f3eg9] { color: red;}</style><template> <div class="example" data-v-f3f3eg9>hi</div></template>

看了一下心凉大佬的博客,这里是给了组件一个唯一的标识,使得他的权重的增加了。

这里插入一件趣事:昨天晚上的时候,我错误的把转换结果当成了解决方法,照猫画虎,也在自己要操作的类上面加上了data-v-f3f3eg9,而且奇迹般的好了。今天再尝试的时候,又不可以了。昨天之所以成功,应是动画名字一致,受到了另一个动画的影响!

这时候我想过是不是可以用组件穿透的方式去解决,但又想了一下,我的样式是可以加上去的,真正的原因是动画在scoped条件下无效

解决方法不要使用动画,可以改成过渡,上面提到了过渡是有效果的。全局style和局部style混合使用,这里切记多个地方使用动画的时候,一定要动画的名不重复,否则会相互影响,如下图 不使用scoped(不建议)
本文链接地址:https://www.jiuchutong.com/zhishi/297642.html 转载请保留说明!

上一篇:逻辑回归(Logistic Regression)原理及其应用(逻辑回归模型)

下一篇:nodejs的安装与配置(nodejs的安装与配置mac)

  • 广州市教育局:全市中小学(高三除外)下周暂不恢复线下教学

    广州市教育局:全市中小学(高三除外)下周暂不恢复线下教学

  • vivo手机怎样一键打开手电筒(vivo手机怎样一键录音)

    vivo手机怎样一键打开手电筒(vivo手机怎样一键录音)

  • airpod无线充电盒有什么用(airpod2 无线充电盒)

    airpod无线充电盒有什么用(airpod2 无线充电盒)

  • 华为nova5pro有呼吸灯么(华为nova5pro有呼吸灯吗)

    华为nova5pro有呼吸灯么(华为nova5pro有呼吸灯吗)

  • 为什么华为p30老是卡(为什么华为p30老手机,不能更新)

    为什么华为p30老是卡(为什么华为p30老手机,不能更新)

  • windows安全中心在哪里打开(windows安全中心怎么关闭)

    windows安全中心在哪里打开(windows安全中心怎么关闭)

  • qq电话挂了后没记录(qq电话挂了后没记录怎么找)

    qq电话挂了后没记录(qq电话挂了后没记录怎么找)

  • 华为手机千牛老是离线状态(华为手机千牛自动离线,什么原因)

    华为手机千牛老是离线状态(华为手机千牛自动离线,什么原因)

  • 电脑很快就锁屏怎么回事(电脑很快就锁屏了)

    电脑很快就锁屏怎么回事(电脑很快就锁屏了)

  • 域名的四个组成部分(域名的四个特点)

    域名的四个组成部分(域名的四个特点)

  • 一个人可以有几个淘宝实名账号(一个人可以有几个微信号)

    一个人可以有几个淘宝实名账号(一个人可以有几个微信号)

  • 怎么看自己抖音是不是被限流了(怎么看自己抖音发布的时间)

    怎么看自己抖音是不是被限流了(怎么看自己抖音发布的时间)

  • 朋友圈不发图片只有文字应该怎么操作(朋友圈不发图片只发文字怎么发)

    朋友圈不发图片只有文字应该怎么操作(朋友圈不发图片只发文字怎么发)

  • 苹果6可以用5g网络吗(iphone 6可以用5g吗)

    苹果6可以用5g网络吗(iphone 6可以用5g吗)

  • 启用ssid广播什么意思(启用ssid广播是什么意思)

    启用ssid广播什么意思(启用ssid广播是什么意思)

  • 苹果8内存有几个版本(苹果8内存有几种型号)

    苹果8内存有几个版本(苹果8内存有几种型号)

  • excel中单元格的引用分为哪三种(excel中单元格的引用d$2称为)

    excel中单元格的引用分为哪三种(excel中单元格的引用d$2称为)

  • apple pencil怎么看电量(apple pencil怎么看充电状态)

    apple pencil怎么看电量(apple pencil怎么看充电状态)

  • 电脑上页面设置在哪里(电脑页面设置上下左右怎么设置)

    电脑上页面设置在哪里(电脑页面设置上下左右怎么设置)

  • 苹果手表能不能单独使用(苹果手表能不能测血糖)

    苹果手表能不能单独使用(苹果手表能不能测血糖)

  • 快手里哪个特效是长腿瘦身(快手哪个特效下巴变尖)

    快手里哪个特效是长腿瘦身(快手哪个特效下巴变尖)

  • 苹果手机如何阻止app的推送通知(苹果手机如何阻止骚扰电话拦截)

    苹果手机如何阻止app的推送通知(苹果手机如何阻止骚扰电话拦截)

  • 小米9屏占比是多少(小米9屏幕尺寸比例)

    小米9屏占比是多少(小米9屏幕尺寸比例)

  • 手机在线和4g在线有什么区别(手机在线和4g在线和wifi在线有什么区别)

    手机在线和4g在线有什么区别(手机在线和4g在线和wifi在线有什么区别)

  • iphone xs max美版是双卡吗(iphone xs max美版是双卡双待吗)

    iphone xs max美版是双卡吗(iphone xs max美版是双卡双待吗)

  • apple id电话号码更改(appleid电话号码已经被使用)

    apple id电话号码更改(appleid电话号码已经被使用)

  • web前端开发期末大作业 ——个人主页(可自取源码)(web前端开发学什么)

    web前端开发期末大作业 ——个人主页(可自取源码)(web前端开发学什么)

  • 关于vue2与vue3(vue2和vue3的兼容)

    关于vue2与vue3(vue2和vue3的兼容)

  • 开专票了还能不能退款
  • 货物或应税劳务服务名称怎么填
  • 幼儿园申报税种及税率
  • 个税申报申报方式选择
  • 房地产土地增值税计税依据
  • 金融企业计提的坏账准备金
  • 公司代收生育津贴怎么做账
  • 加工企业购入辅料记入什么科目?
  • 公司社保退回会退钱吗
  • 出租车行业怎么银行贷款
  • 营改增各项业务销售额按照什么确定
  • 税控专用发票和普通发票
  • 建筑企业在工程所在地全额征收
  • 有了营业执照就可以买社保了吗
  • 补缴税款会计处理
  • 关于城建税教育费附加地方教育附加的计算
  • 发票税率开错怎么处理?
  • 在建工程印花税计税依据
  • 生产企业销售原材料所取得的收入属于( )
  • 公司向个人租车协议范本
  • 民办非企业单位属于什么类型
  • 预交土增税税率
  • 广告公司进项税有哪些
  • windows10如何更改时间
  • Win11如何设置快捷键调音量
  • 微信支付宝收款码二合一
  • 魁北克位置地图
  • ph是什么文件
  • win10您需要权限来执行删除
  • 赊销商品属于什么信用
  • 以前年度应扣未扣支出
  • 进项税额大于销项税额会计分录
  • idea如何运行springboot项目
  • 发票过账和不过账是什么意思
  • php解析base64数据生成图片的方法
  • trainer 平替
  • 2023版最新最全React面试题
  • vmstat命令 监视系统资源状态
  • php100 jquery教程
  • gluster peer status
  • python脚本例子
  • 企业账户有什么好处
  • 进项大于销项附加税怎么处理
  • 资产减值损失属于什么科目借贷方向
  • mongodb基础知识
  • phpcms 标签
  • 字符串合并函数
  • 外地职工的界定
  • 对外投资损失可以抵税吗
  • 生产部的管理人员算什么费用
  • 对方多开票账务会怎么样
  • 应付账款怎么处理
  • 个体生产经营所得税
  • 专项补助资金的账务处理
  • 上年未计提所得税,本年怎么做分录
  • 担保公司预计负债
  • 管理费用贷方有余额怎么处理
  • 长期待摊费用怎么做账
  • mysql@变量
  • sql server 服务器配置
  • windows server 2008 r2最大支持内存
  • ubuntu git not found
  • freebsd操作命令
  • wp程序
  • Win10任务栏天气怎么关闭
  • 将哪一linux文件系统引入
  • 用户账户限制
  • xp系统怎么关闭fn
  • 应用程序发生异常如何解决
  • 2021年win10累积更新
  • win8.1c盘满了怎么办
  • win8系统电脑卡
  • cocos2dx4.0教程
  • shell脚本中判断grep的结果
  • 炉石传说用什么语言开发的
  • Python虚拟环境创建
  • 交管12123怎么打电话
  • 公益性捐赠支出属于什么会计科目
  • 城镇土地使用税优惠政策
  • 跨区域涉税事项报告表
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设