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

  • App推广的10大难题,量上不去有时候不是你的错(app推广难不难)

    App推广的10大难题,量上不去有时候不是你的错(app推广难不难)

  • win7屏幕休眠时间怎么调(win7屏幕休眠时间不生效)

    win7屏幕休眠时间怎么调(win7屏幕休眠时间不生效)

  • vivox70pro+有nfc吗(vivox70nfc功能在哪里设置)

    vivox70pro+有nfc吗(vivox70nfc功能在哪里设置)

  • vivox60怎么投屏到电视(vivox60怎么投屏电视看电视剧)

    vivox60怎么投屏到电视(vivox60怎么投屏电视看电视剧)

  • 天玑800相当于高通骁龙什么处理器(天玑800相当于高端手机吗)

    天玑800相当于高通骁龙什么处理器(天玑800相当于高端手机吗)

  • 2020电信还有合约机吗(电信20年合约)

    2020电信还有合约机吗(电信20年合约)

  • pot al10是华为什么型号(华为pot—al10多少钱)

    pot al10是华为什么型号(华为pot—al10多少钱)

  • 手机音质怎么调节(手机音质怎么调节清脆)

    手机音质怎么调节(手机音质怎么调节清脆)

  • 荣耀20pro怎么卸载东西(荣耀20s怎么卸载不用的软件)

    荣耀20pro怎么卸载东西(荣耀20s怎么卸载不用的软件)

  • soul如何设置隐身(soul如何设置隐藏注册天数)

    soul如何设置隐身(soul如何设置隐藏注册天数)

  • 移动云主机可提供哪些操作系统(移动云主机的计费方式)

    移动云主机可提供哪些操作系统(移动云主机的计费方式)

  • vivox30侧键是干嘛的(vivo手机侧面按键)

    vivox30侧键是干嘛的(vivo手机侧面按键)

  • 安装视频专用播放器app在哪里下载(安装视频专用播放器下载)

    安装视频专用播放器app在哪里下载(安装视频专用播放器下载)

  • ps钢笔路径怎么描边(ps钢笔路径怎么变成线)

    ps钢笔路径怎么描边(ps钢笔路径怎么变成线)

  • 在wps中如何画横线(在wps中如何画横线和竖线)

    在wps中如何画横线(在wps中如何画横线和竖线)

  • 黑鲨能否开启私密空间(黑鲨能否开启私人空间)

    黑鲨能否开启私密空间(黑鲨能否开启私人空间)

  • 京东app评价怎么撤销(京东app评价在哪里)

    京东app评价怎么撤销(京东app评价在哪里)

  • 安卓手机ip是固定的吗(安卓手机ip是固定地址吗)

    安卓手机ip是固定的吗(安卓手机ip是固定地址吗)

  • 怎么验证微信好友有没有把我删了(怎么验证微信好友是否把我删除)

    怎么验证微信好友有没有把我删了(怎么验证微信好友是否把我删除)

  • 手机号打不出去怎么回事(手机号打不出去电话怎么回事)

    手机号打不出去怎么回事(手机号打不出去电话怎么回事)

  • 12.2无法激活4g通话(激活sim卡失败无法入网)

    12.2无法激活4g通话(激活sim卡失败无法入网)

  • 如何让网速限制解除呢?有什么方法吗?(网速怎么限制10mb以内)

    如何让网速限制解除呢?有什么方法吗?(网速怎么限制10mb以内)

  • linux怎么修改账户头像? linux修改登录用户头像的方法(Linux怎么修改账户名)

    linux怎么修改账户头像? linux修改登录用户头像的方法(Linux怎么修改账户名)

  • Mac安装系统提示副本损坏怎么办?Mac安装系统提示应用程序副本已损坏解决方法(mac系统安装出错)

    Mac安装系统提示副本损坏怎么办?Mac安装系统提示应用程序副本已损坏解决方法(mac系统安装出错)

  • 直布罗陀巨岩上的人行天桥 (© Stephen Ball/Alamy)(直布罗陀巨岩山)

    直布罗陀巨岩上的人行天桥 (© Stephen Ball/Alamy)(直布罗陀巨岩山)

  • 增值税专用发票抵扣期限
  • 天猫提现一直没到账
  • 车船税减免税优惠政策
  • 企业所得税资产总额怎么计算
  • 公款私存个人账户怎么处理
  • 小微企业免税销售额和未达起征点销售额
  • 酒店出租会议室增值税税率
  • 回购股份限售
  • 工程项目立项前的安全评估
  • 公司采购报销没发票
  • 报销职工住院费多久到账
  • 利息收入为什么是负数
  • 冲销预付款的会计分录
  • 小规模企业营业税
  • 金税盘上报汇总是什么时候
  • 未来公司销售一批产品给东方公司
  • 公司还没有成立,前期的费用怎么开发票呢
  • 报表中在产品填什么数据
  • 资源税进什么科目
  • 为什么无形资产减值准备一经计提不得转回
  • 利润表中财务费用可以为负数吗
  • 个人银行卡转公账怎么转
  • 企业注销后注册资金取出需要交税吗
  • 营改增后兼营非应税劳务的税务处理怎么做?
  • 云服务器免费使用
  • win10系统声音有杂音
  • 应用程序发生异常 未知的软件异常(0xe06d7363)
  • 应收票据到期收回时和未到期转让时
  • 会计基础工作是会计工作的基本环节
  • 加班餐费税前扣除问题
  • 电商快递费怎么做账
  • 企业预付工程款的会计分录怎么做
  • 长期借款的概念
  • 一只棕色
  • 乐吾实验学校网站
  • python抓取淘宝店铺商品
  • 学校官网首页图片
  • 猿创征文,宝藏工具篇
  • ai作画
  • 真题解析买谁的
  • 复制/root/install.log到/tmp
  • 应纳税所得额100-300万税率
  • 应付票据核算的内容
  • 小规模纳税人季报需要报什么
  • 利润表的本月数怎么算
  • 企业税金总额包括什么
  • 个税申报本期收入是填应发还是实发
  • 织梦自定义字段
  • db2数据库备份文件为bkd格式
  • 交易性金融资产入账价值怎么计算
  • 缴纳个人所得税有什么好处
  • 弥补以前年度亏损怎么算
  • 利润表中的利息费用是利息支出吗
  • 税务稽查补缴上年所得税分录
  • 其他收益结转到什么科目
  • 利润表中资产减值损失为正数是什么原因
  • 技术服务收入包括哪些
  • 其他应付款贷方正数表示什么意思
  • 代金券的利弊有哪些方面
  • 专项应付款贷方余额表示
  • 技术服务收入如何纳税
  • 冲减和冲销的会计分录
  • 发放工资并扣个人所得税
  • 创建svn库
  • dcom进程
  • sendmail -t
  • svn怎么切换用户名
  • css spirit
  • animate javascript
  • jquery滑动效果
  • eslint-plugin
  • 批量压缩命令
  • jQuery position() 函数详解以及jQuery中position函数的应用
  • linux tar -zxf
  • 安卓手机管家怎么关闭
  • 树的python
  • android 自定义dialog
  • jquery设置div的宽度和高度
  • 2021税务公告
  • 大连开发区哪家自助餐好吃还便宜
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设