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

  • 小米安全模式怎么恢复(小米安全模式怎么弄掉)

    小米安全模式怎么恢复(小米安全模式怎么弄掉)

  • 华为p50pro无线充电怎么开启(华为p50pro无线充电协议)

    华为p50pro无线充电怎么开启(华为p50pro无线充电协议)

  • oppoa8如何设置微信深色模式(oppo手机怎么设置微信?)

    oppoa8如何设置微信深色模式(oppo手机怎么设置微信?)

  • macbookpro要不要贴膜

    macbookpro要不要贴膜

  • 怎样查是谁举报的群(怎样查是谁举报的微信群聊)

    怎样查是谁举报的群(怎样查是谁举报的微信群聊)

  • rec按键是什么意思(rec按键是什么意思电脑)

    rec按键是什么意思(rec按键是什么意思电脑)

  • ipad md788ch/a是air几(ipad md788ch/b)

    ipad md788ch/a是air几(ipad md788ch/b)

  • qq回收站照片永久删了怎么恢复(qq照片回收站里面的照片期限多长)

    qq回收站照片永久删了怎么恢复(qq照片回收站里面的照片期限多长)

  • 苹果手机充电口有脏会不会有什么影响(苹果手机充电口进水提示无法充电)

    苹果手机充电口有脏会不会有什么影响(苹果手机充电口进水提示无法充电)

  • 手机腾讯会议听不到声音(手机腾讯会议听不到共享视频的声音)

    手机腾讯会议听不到声音(手机腾讯会议听不到共享视频的声音)

  • 抖音草稿箱的视频怎么剪辑(抖音草稿箱的视频怎么保存到相册里)

    抖音草稿箱的视频怎么剪辑(抖音草稿箱的视频怎么保存到相册里)

  • 淘宝匿名购买和不匿名有什么区别(淘宝匿名购买的意思)

    淘宝匿名购买和不匿名有什么区别(淘宝匿名购买的意思)

  • 淘宝店铺被扣12分以后还能开起来吗(淘宝店铺被扣12分怎么办,有什么方法补偿)

    淘宝店铺被扣12分以后还能开起来吗(淘宝店铺被扣12分怎么办,有什么方法补偿)

  • 安卓系统内存不足解决方法(安卓系统内存满了怎么样解决)

    安卓系统内存不足解决方法(安卓系统内存满了怎么样解决)

  • oppor9plus有没有语音唤醒功能(oppor9plus有没有红外线遥控功能)

    oppor9plus有没有语音唤醒功能(oppor9plus有没有红外线遥控功能)

  • 小米8怎么换电池(小米怎么换电池)

    小米8怎么换电池(小米怎么换电池)

  • 华为nova5ipro防水吗(华为nova5i pro防水不)

    华为nova5ipro防水吗(华为nova5i pro防水不)

  • 手机突然显示不显卡什么原因(手机突然显示不可上网)

    手机突然显示不显卡什么原因(手机突然显示不可上网)

  • iphone11怎么关闭通知显示消息内容(iphone11怎么关闭休眠模式)

    iphone11怎么关闭通知显示消息内容(iphone11怎么关闭休眠模式)

  • 交换机的交换技术(交换机的交换技术有那三种?)

    交换机的交换技术(交换机的交换技术有那三种?)

  • acdsee怎么改图片大小(acdsee怎么改图片分辨率大小)

    acdsee怎么改图片大小(acdsee怎么改图片分辨率大小)

  • vivox21如何隐藏应用图标(vivox21如何隐藏软件)

    vivox21如何隐藏应用图标(vivox21如何隐藏软件)

  • airpods如何重新配对(airpods如何重新绑定icloud)

    airpods如何重新配对(airpods如何重新绑定icloud)

  • 热点密码在哪看(电脑热点密码在哪看)

    热点密码在哪看(电脑热点密码在哪看)

  • 税收指的是什么
  • 受托代销商品款是什么科目
  • 行政单位设计费计入哪个科目
  • 原材料进口关税怎么算
  • 债务重组损益的计算公式
  • 企业所得税汇算清缴账务处理
  • 关于半年度净资产的公告
  • 转售的物业
  • 建筑业的合理避税
  • 固定资产一次性计入费用的账务处理
  • 财务负责人必须是本公司员工吗
  • 公司账上没钱股东又不出资发工资怎么办
  • 预存话费返还怎么操作
  • 保洁属于劳务报酬吗
  • 个税怎么抵
  • 代销返点如何进行会计处理?
  • 行业协会会费收缴标准
  • 出售废品收入
  • 如何关闭win10自带杀毒软件
  • win11系统开机密码设置
  • 清理缓存网页电脑
  • 一个产品要有什么认证
  • 事业单位研究开题报告
  • 累计折旧 减少
  • 长期待摊费用挂账原因
  • macos ppt软件
  • windows11搜索
  • 应交税金减免税款
  • 既征增值税又征消费税的是
  • win7系统文件在哪里可以找到
  • latex希腊字母斜体
  • 穹顶高度
  • react错误处理
  • linux命令bzip2
  • 商品交换包括
  • 个税率是多少
  • 个人给境外公司付款
  • 从业人数啥意思
  • 技术服务型企业企业所得税率
  • 高新企业奖励要交企业所得税吗
  • notepad+v
  • 工资薪金税务缴纳
  • 管理费用的范畴
  • 应付账款的四大基本要素
  • 小企业长期股权投资减值损失采用直接转销法
  • 丁字账户例题及解析
  • 公司的装修费计入什么科目
  • 银行汇票该怎么做账
  • 收到银行承兑汇票怎么处理
  • 收到投资款现金流量放到哪里
  • 投标保证金支付给谁
  • 商品验收入库时怎么做账
  • 营业外支出的用法
  • 买公司的钱计入什么科目
  • 什么企业属于小型微利企业
  • 私企做会计风险大吗
  • window怎么操作
  • ubuntu 21.04 安装
  • 电脑出现windows怎么办
  • 太极越狱助手
  • win7休眠模式在哪
  • 怎么下载win8
  • win8系统怎么安装软件
  • win7指令代码
  • nodejs中art-template模板语法的引入及冲突解决方案
  • linux rpm -i
  • javascript unicode与GBK2312(中文)编码转换方法
  • iframe内容自适应缩放
  • jquery网站开发
  • node.js批量添加数据
  • w10cmd命令高级命令
  • js快速生成数组
  • 在windows中快捷键的作用
  • python 分析
  • 重庆市电子税务局官网登录入口注册
  • 即征即退什么时候确认收入
  • 怎样查询灵活就业养老保险缴费记录
  • 账本遗失征管法处罚
  • 小规模纳税人个税税率
  • 重庆电子税务局怎么开电子发票
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设