位置: 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)

  • OPPO Ace2有没有双扬声器呢(oppo ace2是双频gps吗)

    OPPO Ace2有没有双扬声器呢(oppo ace2是双频gps吗)

  • 手机碎屏裂纹处发黄怎么办(手机屏幕裂碎)

    手机碎屏裂纹处发黄怎么办(手机屏幕裂碎)

  • airpods跳电怎么解决(airpods跳电怎么恢复)

    airpods跳电怎么解决(airpods跳电怎么恢复)

  • 修复聊天记录显示没有异常无需修复(修复聊天记录显示没有异常无需修复是什么意思)

    修复聊天记录显示没有异常无需修复(修复聊天记录显示没有异常无需修复是什么意思)

  • 红米note7怎么清理听筒灰尘(红米note7怎么清理手机)

    红米note7怎么清理听筒灰尘(红米note7怎么清理手机)

  • siri应用建议怎么删除(siri应用建议怎么设置)

    siri应用建议怎么删除(siri应用建议怎么设置)

  • 电脑一直说有问题重启(电脑老是提示有问题需要重启)

    电脑一直说有问题重启(电脑老是提示有问题需要重启)

  • oppoa59s上市时间(oppoa59s上市日期)

    oppoa59s上市时间(oppoa59s上市日期)

  • 淘宝投诉程序怎么走(淘宝投诉的方法如下)

    淘宝投诉程序怎么走(淘宝投诉的方法如下)

  • 同城群和兴趣群区别(同城的群)

    同城群和兴趣群区别(同城的群)

  • maxell是什么牌子电池(maxell是什么牌子磁带)

    maxell是什么牌子电池(maxell是什么牌子磁带)

  • 抖音入驻商家保证金多少(抖音小店商家保障中心在哪)

    抖音入驻商家保证金多少(抖音小店商家保障中心在哪)

  • jpeg和jpeg2000的区别(jpeg2000和jpeg哪种清晰)

    jpeg和jpeg2000的区别(jpeg2000和jpeg哪种清晰)

  • 怎么把lte改为4g(怎样把lte变成了4g)

    怎么把lte改为4g(怎样把lte变成了4g)

  • 为什么微信自动退出登录(为什么微信自动删除好友)

    为什么微信自动退出登录(为什么微信自动删除好友)

  • 蓝牙媒体音频处于断开状态怎么弄(蓝牙媒体音频处于断开状态无法播放音乐)

    蓝牙媒体音频处于断开状态怎么弄(蓝牙媒体音频处于断开状态无法播放音乐)

  • 华为终端和华为的区别(华为终端和华为技术的区别)

    华为终端和华为的区别(华为终端和华为技术的区别)

  • 手机三摄跟四摄的区别(手机摄像头三摄和四摄的区别)

    手机三摄跟四摄的区别(手机摄像头三摄和四摄的区别)

  • 怎么注销芒果tv账号(怎么注销芒果会员)

    怎么注销芒果tv账号(怎么注销芒果会员)

  • 如何打开手机热点(如何打开手机热成像)

    如何打开手机热点(如何打开手机热成像)

  • 云闪付邀请红包怎么用(云闪付邀请红包什么时候到账)

    云闪付邀请红包怎么用(云闪付邀请红包什么时候到账)

  • 云闪付具有什么功能(云闪付具有什么特征)

    云闪付具有什么功能(云闪付具有什么特征)

  • 商家接受预定怎么设置(商品接受预订的句子)

    商家接受预定怎么设置(商品接受预订的句子)

  • 四级密码要求(四级的密码要求)

    四级密码要求(四级的密码要求)

  • word自定义属性在哪(word文档添加自定义属性)

    word自定义属性在哪(word文档添加自定义属性)

  • 美团众包如何拨打客服电话(美团众包怎么取单)

    美团众包如何拨打客服电话(美团众包怎么取单)

  • 疑问搞懂,python中文词频统计,让你真能学会(python答疑)

    疑问搞懂,python中文词频统计,让你真能学会(python答疑)

  • 税控盘服务费全额抵扣分录
  • 混合销售行为如何缴纳增值税税率
  • 资本公积转增资本会引起什么变化
  • 加油卡充值可以退吗
  • 年初建账考虑要点有哪些
  • 领用包装物的会计分录
  • 企业其他综合收益减少应该怎么处理
  • 个人工资薪金所得税怎么查
  • 有限合伙企业注册资金要求
  • 公司老账怎么处理
  • 资产负债率计算方式
  • 不续约赔偿金要交税吗
  • 事业单位存货盘盈
  • 公司发实物要交税吗
  • 税务管理相关知识
  • 生产用的软件
  • 代开专用发票缴纳的增值税需要计提吗?
  • 机票报销发票抬头要开公司的吗
  • 不动产60%和40%抵扣时间
  • 在建工程完工后如何转为固定资产
  • 公司注销了工程款还能转账吗
  • 研发设备一次性计入研发费用账务处理
  • 建筑服务工程款会计分录
  • 车间发生的购买办公用品支出应计入什么账户
  • 房企结转收入
  • 租房押金收不回来怎么做账
  • 暂估入账冲回
  • linux网络设置在哪里
  • 主办会计工作主要做什么
  • 服务外包企业
  • 捐赠口罩的人
  • 发生销售折让会计分录
  • linux和windows关系
  • php+ mysql教程
  • kb4580419更新
  • win11wifi功能消失了
  • 财务变更是什么意思
  • 政府会计制度固定资产折旧哪个月开始计提
  • 免征税费需要申报吗
  • 材料退款会计分录
  • thinkphp分表
  • 公司缴纳残保金怎么做账
  • 中科院t1
  • 现金和现金等价物包括哪些
  • 员工加班餐费该怎么算
  • 汽车年审检测费收费标准
  • 外商独资企业资本金要求
  • 事件委托js例子
  • 一般纳税人增值税税率
  • 合并报表少数股东权益是什么
  • 以前未入账固定资产补入账
  • 收回投资收到的现金减少
  • 哪些情况可以开立基本账户
  • sql server遇到的主要问题及解决方法
  • 行政单位基建管理办法
  • 受托代销商品款是什么类账户
  • 总公司和分公司不在一个区怎么纳税
  • 植物售卖
  • 机场员工家属机票
  • 建筑工程劳务分包合同范本2019
  • 固定资产更新改造被替换的旧部件残值收入
  • 预存返现活动规则
  • mysql第四章
  • 安装mysql5.7虚拟机教程
  • win10邮件和日历怎么更新新版outlook
  • 怎么查看macbook air序列号
  • adsl怎么设置上网
  • dos到windows
  • 谷歌编程之夏2021
  • Node.js中的事件循环是什么
  • node drain事件
  • 比较详细的手把件有哪些
  • pm2启动nodejs
  • 基于js实现微信直播
  • javascript 对象
  • 企业购车需要交消费税吗
  • 税务局如何查询社保明细
  • 广东省职称证书编号查询系统
  • 生活费需要缴纳什么税
  • 为什么要进行进气歧管真空度检测
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设