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

  • 淘宝互动消息怎么查看(淘宝互动消息怎么打开)

    淘宝互动消息怎么查看(淘宝互动消息怎么打开)

  • qq自动回复怎么弄(qq自动回复怎么关闭)

    qq自动回复怎么弄(qq自动回复怎么关闭)

  • 华为手机搜索历史已关闭怎么开启(华为手机搜索历史怎么关闭)

    华为手机搜索历史已关闭怎么开启(华为手机搜索历史怎么关闭)

  • 抖音流量池分配规则(抖音流量池分配规则图)

    抖音流量池分配规则(抖音流量池分配规则图)

  • 魅族小窗算切屏吗?(小窗模式魅族)

    魅族小窗算切屏吗?(小窗模式魅族)

  • 触屏不灵敏是什么原因造成的(触屏不灵敏是什么跟地线原因造成的呢)

    触屏不灵敏是什么原因造成的(触屏不灵敏是什么跟地线原因造成的呢)

  • oppoa37m怎么分屏(oppoa37手机怎么分屏操作视频)

    oppoa37m怎么分屏(oppoa37手机怎么分屏操作视频)

  • 计算机系统主要由哪几部分组成(计算机系统主要包括)

    计算机系统主要由哪几部分组成(计算机系统主要包括)

  • 苹果11打字怎么换行(苹果11打字怎么设置手写)

    苹果11打字怎么换行(苹果11打字怎么设置手写)

  • 手机摔不亮了但有声音(手机摔不亮了是什么原因)

    手机摔不亮了但有声音(手机摔不亮了是什么原因)

  • 为什么连了蓝牙wifi网速慢(为什么连了蓝牙还是手机外放)

    为什么连了蓝牙wifi网速慢(为什么连了蓝牙还是手机外放)

  • aicde主要包含什么(aicd的意义)

    aicde主要包含什么(aicd的意义)

  • 快手怎么用快手号登录(快手怎么用快手号登陆)

    快手怎么用快手号登录(快手怎么用快手号登陆)

  • powerpoint怎么设置艺术字形状(powerpoint怎么设置主题)

    powerpoint怎么设置艺术字形状(powerpoint怎么设置主题)

  • TP-LINK验证码验证失败怎么回事(tplink安全码获取验证码)

    TP-LINK验证码验证失败怎么回事(tplink安全码获取验证码)

  • 华为荣耀20自带钢化膜吗(华为荣耀20自带浏览器是哪个)

    华为荣耀20自带钢化膜吗(华为荣耀20自带浏览器是哪个)

  • 如何查看电脑显卡性能(如何查看电脑显示器配置参数)

    如何查看电脑显卡性能(如何查看电脑显示器配置参数)

  • 转转被永久封禁能收到钱吗(转转被永久封禁还能收到钱吗)

    转转被永久封禁能收到钱吗(转转被永久封禁还能收到钱吗)

  • 小红书什么时候上架苹果商店(小红书什么时候开始火的)

    小红书什么时候上架苹果商店(小红书什么时候开始火的)

  • 如何在照片上添加文字(如何在照片上添加音乐)

    如何在照片上添加文字(如何在照片上添加音乐)

  • 怎么退出全国亲情网(怎么退出全国亲情账号)

    怎么退出全国亲情网(怎么退出全国亲情账号)

  • 手机流量怎么送人(手机流量怎么送给别人手机上怎么操作)

    手机流量怎么送人(手机流量怎么送给别人手机上怎么操作)

  • 微信如何拍视频带音乐(微信如何制作小视频)

    微信如何拍视频带音乐(微信如何制作小视频)

  • scrtkfg.exe - scrtkfg是什么进程 有什么用

    scrtkfg.exe - scrtkfg是什么进程 有什么用

  • python之sys模块详解(python3 sys模块)

    python之sys模块详解(python3 sys模块)

  • 去税局更正申报需要什么资料,忘记带营业执照
  • 一张报关单可以分两次退税吗
  • 居民企业参股外国企业信息报告填写
  • 企业的两金是哪两金
  • 企业所得税表中营业成本包括费用吗
  • 缴纳所得税费用的会计分录
  • 长期负债营运资金比率公式
  • 小规模纳税申报时间
  • 怎么计提应交税费
  • 购买方已认证未抵扣,发票用退回吗
  • 单位食堂油烟管道清洗记录表
  • 房地产商品房销售营业税怎么算
  • 定额发票什么时候失效
  • 企业所得税汇算清缴申报表
  • 处于成熟期的企业其预算模式的特点是以什么为起点
  • 五年之内,企业可追补应扣支出
  • 个税申报表怎么打印
  • 现金购入库存商品的分录
  • 期初数据科目期初余额怎么录入?
  • 水利基金免税额度是多少
  • 投入法和产出法的确定属于会计估计变更吗
  • 收到股改代扣代缴税款
  • 在禁用uac时无法激活什么原因
  • rftray.exe - rftray是什么进程 有什么用
  • 快启动u盘装系统教程
  • 挂证不付工资只代缴社保账务处理
  • 利息支出属于生产成本吗
  • 企业销售货物收到价款5000元这笔经济业务属于
  • 股东个人消费如何合理报销
  • 递延所得税负债借贷方向
  • php静态方法和非静态方法
  • 前端实战面试题
  • 购买方纳税人信息与第三方信息不符
  • 小规模建筑公司经营范围大全
  • 征收率是税率吗
  • 帝国cms8.0
  • 5年前开的发票退货可以冲红吗?
  • mysql8绿色版
  • 润滑脂开票属于哪一类
  • 投资性房地产如何折旧
  • SQL Server 2008+ Reporting Services (SSRS)使用USER登录问题
  • 超市购物小票可以入账吗
  • 高速公路通行费可以抵扣进项税吗
  • 法人和税务可以是一个人吗
  • 固定资产的核算内容包括
  • 建筑业简易计税预交
  • 让渡资产使用权收入属于收入吗
  • 进口关税的会计处理方法
  • 支付宝已经支付快递费怎么还支付
  • 国际货运公司支付境外运费
  • 银行的现金解款需要多久
  • 单位社保缴费基数比例
  • 收到保险公司的赔款怎么做账
  • 收到上市公司分红企业所得税减半征收的情景
  • 来料加工费用价格表
  • 购进农产品直接销售核定扣除
  • ubuntu20.04 unity
  • linux怎么用命令
  • linux查看du
  • ghost后恢复
  • win7系统隐藏文件夹怎么取消隐藏
  • ubuntu文本编辑器怎么打开
  • bash.exe
  • xp系统怎么和win7系统共享
  • cpqdfwag.exe是什么进程 能结束吗 cpqdfwag进程查询
  • 屏保 win7
  • win7软件包
  • jquery1
  • vbs编辑
  • python元数据
  • python str()怎么用
  • python周期性分析
  • 税务 违法税收
  • 充电桩充电怎么收费,几种收费方法
  • 个税完税证明在哪里开具
  • 江苏省电子税务局怎么添加办税人员
  • 税务申报时显示未抄报税?
  • 车没交车船税上路什么后果
  • 税务负责人
  • 宏酷集团创始人简介
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设