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

  • 小米平板5pro 12.4怎么关闭桌面搜索框(小米平板5Pro 12.4 屏幕红)

    小米平板5pro 12.4怎么关闭桌面搜索框(小米平板5Pro 12.4 屏幕红)

  • 美团消息中心信息怎么删除(美团信息发生变化怎么办)

    美团消息中心信息怎么删除(美团信息发生变化怎么办)

  • 华硕天选bios怎么设置中文(华硕天选bios怎么设置u盘启动)

    华硕天选bios怎么设置中文(华硕天选bios怎么设置u盘启动)

  • 西瓜视频会员入口在哪(西瓜视频怎么办会员)

    西瓜视频会员入口在哪(西瓜视频怎么办会员)

  • 苹果灰色内存能删除吗(苹果灰色的内存)

    苹果灰色内存能删除吗(苹果灰色的内存)

  • 在wps上怎么做ppt文件(在wps上如何做ppt)

    在wps上怎么做ppt文件(在wps上如何做ppt)

  • 微信把我拉黑了怎么给他发信息(前女友微信把我拉黑了)

    微信把我拉黑了怎么给他发信息(前女友微信把我拉黑了)

  • 腾讯视频会员微信登录怎么给别人用(腾讯视频会员微信怎么授权别人登录)

    腾讯视频会员微信登录怎么给别人用(腾讯视频会员微信怎么授权别人登录)

  • 美团外卖注销后手机号还能再注册吗(美团外卖注销后还是新用户吗)

    美团外卖注销后手机号还能再注册吗(美团外卖注销后还是新用户吗)

  • Word文档页眉下面有一条线怎么设置(word文档页眉下划线颜色怎么修改)

    Word文档页眉下面有一条线怎么设置(word文档页眉下划线颜色怎么修改)

  • 手机闪存有什么作用(手机闪存有什么影响)

    手机闪存有什么作用(手机闪存有什么影响)

  • 苹果手机屏幕轻微老化(苹果手机屏幕轻轻点却跟重按一样)

    苹果手机屏幕轻微老化(苹果手机屏幕轻轻点却跟重按一样)

  • 华为手机自己叮咚响(华为手机总是无缘无故自动响铃声)

    华为手机自己叮咚响(华为手机总是无缘无故自动响铃声)

  • reader是什么意思(usb reader是什么意思)

    reader是什么意思(usb reader是什么意思)

  • 华为nova5i的OTG在哪

    华为nova5i的OTG在哪

  • 为什么加不了群(为什么我加不了微信群)

    为什么加不了群(为什么我加不了微信群)

  • 怎样让手机电量更持久(怎样让手机电量快速减少)

    怎样让手机电量更持久(怎样让手机电量快速减少)

  • windows7菜单有哪三类(windows7菜单有哪四种)

    windows7菜单有哪三类(windows7菜单有哪四种)

  • 怎么把音乐拷贝到u盘(怎么把音乐拷贝到电脑)

    怎么把音乐拷贝到u盘(怎么把音乐拷贝到电脑)

  • ipad盲人模式怎么关(ipad盲人模式怎么开机)

    ipad盲人模式怎么关(ipad盲人模式怎么开机)

  • 华为手机路况怎么设置(华为手机路况怎么关闭)

    华为手机路况怎么设置(华为手机路况怎么关闭)

  • oppofdx怎么截屏(oppo find x怎么截长屏)

    oppofdx怎么截屏(oppo find x怎么截长屏)

  • 字体加粗怎么弄(ps中字体加粗怎么弄)

    字体加粗怎么弄(ps中字体加粗怎么弄)

  • Win7为什么会显示电脑未识别的网络 无internet访问(win7为什么显示多重网络)

    Win7为什么会显示电脑未识别的网络 无internet访问(win7为什么显示多重网络)

  • 深度学习|论文中常用的注意力模块合集(下)

    深度学习|论文中常用的注意力模块合集(下)

  • python tqdm是什么

    python tqdm是什么

  • 增量留抵税额会计处理
  • 一般纳税人劳务票一般开几个点
  • 社保滞纳金所得税汇算需要调增吗
  • 银行进账单票据号码在哪里
  • 第一次开电子普票怎么开
  • 税控技术维护费每年都能抵扣吗
  • 房地产中的存货是什么意思
  • 公司代扣代缴个人所得税如何退税
  • 经销商注册什么公司
  • 印花税一个月一报吗
  • 划拨土地使用权多少年
  • 进项税转出的附加税怎么做
  • 甲供材料工程如何办理结算
  • 税法关于印花税的规定
  • 递延收益相关的法律规定
  • 企业股东变更需要哪些手续
  • 勾选认证的发票在哪里能查询
  • 销售费用变动率公式
  • 固定资产分期抵扣怎么申报增值税?
  • 劳务派遣个税怎么扣
  • 资产减值损失是什么类科目
  • 本年固定资产投资额与不良贷款的关系
  • 补交以前年度个税怎么做账
  • 销售商品会计分录怎么写
  • 如何解决电脑无法定位程序输入点
  • 怎么用苹果6splus
  • 退税账务处理分录
  • 收到的进项发票要在多久前认证
  • 广告公司收到广告费发票如何入账
  • 阿里云jar包
  • 拉马克是哪国人
  • 跨省不动产登记
  • 如何用php制作网页
  • vue2 vue-router 不显示页面问题
  • html 提交表单
  • php sha1加密 解密
  • 保险外币业务
  • 小微公司开票
  • 转出未交增值税会计处理
  • sqlserver2008触发器语法
  • 施工企业结算单能不能入账
  • 小规模纳税人水利基金税率
  • 专用发票丢失怎么入账
  • 餐具报损率一般为多少
  • 上年未结转的成本今年可以结转吗
  • 个人所得税不需要汇算清缴
  • 购入软件的账务处理
  • 主营业务成本如何设置明细
  • 委外加工半成品入库的会计分录
  • 事业单位的股东是谁
  • 公司垫付员工社保分录
  • 医院收费票据可以入账吗
  • 公司对员工罚款怎么处理
  • 年终奖通常怎么计算
  • windowsserver2008r2忘记开机密码怎么办
  • 如何利用批处理实现更改ip修改
  • ubuntu系统怎么开机
  • windows7桌面背景怎么设置
  • win7 24小时制
  • 轻松搞定琥珀甲教程
  • win10系统怎么cmd
  • python标准库很庞大,它可以帮助处理各种工作,包括
  • node.js原生支持的编码格式
  • 经典都有什么
  • word-wrap在firefox中不起作用的解决方法
  • 3dsMax插件开发环境配置
  • jQuery position() 函数详解以及jQuery中position函数的应用
  • xcopy命令怎么用
  • unity c#开发
  • 创建shell脚本命令
  • JavaScript toFixed() 方法
  • python编程快速
  • 安卓手机照片压缩
  • jq cookie
  • 交通运输业的税率9%和13%
  • 金税三期个税下载官网手机版
  • 柳州 税务
  • 临沭公交车多久一班
  • 浙江电子税务局app
  • 国税局地税局
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设