【Vue】踩坑日记：Scoped下动画无效，曾经以为百利而无一害的Scoped，也有自己的限制

游坦之 2023-06-22 原文

文章目录

问题描述

在开发的前期，我清晰的记得使用动画完成了图片放大的效果，当时还写了一篇博文 http://t.csdn.cn/lA9aq上了热榜。可是过了几天之后，这个效果居然“失效了”，我百思不得其解。一度怀疑自己的代码写的有问题，在CSDN等各大博客平台上查找了很久也没找到解决方案。在偶然的尝试下，我发现是scoped影响了动画的效果。真是欲哭无泪，打死我都想不到是scoped的原因。从学习vue的时候就习惯性的在style后面加上scoped，为的是不影响其他组件。曾几何时，我一度以为scoped有百利而无一害。痛定思痛，写下这篇博客，为的是警醒大家不要犯和我一样的错误，同时也提醒自己，对待一个知识点，一定要学透了，不然以后必受不熟悉其的害处。

如果您的时间很宝贵，您可以直接去看解决方法；如果您的时间闲暇，不妨听我掰扯掰扯，所谓前车之"覆"，后车之师。

解决过程

这里我看到动画的效果被加上去了，但是动画不生效。一度认为是自己动画代码写错了

悬浮的时候效果也加上了，但是不起作用

尝试删掉一些代码试试，结果变成了沿着X、Y只往一个方向拓展，类似于宽高以左上角为起点放大

想到了style.cssText会覆盖以前的样式，就把悬浮之前的样式也加了上去，结果回到解放前，又失效了。

试一试使用过渡，过渡是可以的（★）

这时候是可以的

然后又改成动画，结果还是不可以。

神来之笔，新建了一个页面，莫名其妙的删掉了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（不建议）

无一 Scoped span class token vue.js 动画前端

有关【Vue】踩坑日记：Scoped下动画无效，曾经以为百利而无一害的Scoped，也有自己的限制的更多相关文章

ruby-on-rails - Rails 5 Active Record 记录无效错误 - 2
我有两个Rails模型，即Invoice和Invoice_details。一个Invoice_details属于Invoice，一个Invoice有多个Invoice_details。我无法使用accepts_nested_attributes_forinInvoice通过Invoice模型保存Invoice_details。我收到以下错误:(0.2ms)BEGIN(0.2ms)ROLLBACKCompleted422UnprocessableEntityin25ms(ActiveRecord:4.0ms)ActiveRecord::RecordInvalid(Validationfa
Unity 3D 制作开关门动画,旋转门制作,推拉门制作,门把手动画制作 - 2
Unity自动旋转动画1.开门需要门把手先动,门再动2.关门需要门先动,门把手再动3.中途播放过程中不可以再次进行操作觉得太复杂?查看我的文章开关门简易进阶版效果:如果这个门可以直接打开的话,就不需要放置"门把手"如果门把手还有钥匙需要旋转,那就可以把钥匙放在门把手的"门把手",理论上是可以无限套娃的可调整参数有:角度,反向,轴向,速度运行时点击Test进行测试自己写的代码比较垃圾,命名与结构比较拉,高手轻点喷,新手有类似的需求可以拿去做参考上代码usingSystem.Collections;usingSystem.Collections.Generic;usingUnityEngine;u
计算机毕业设计ssm+vue基本微信小程序的小学生兴趣延时班预约小程序 - 2
项目介绍随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱小学生兴趣延时班预约小程序的设计与开发被用户普遍使用,为方便用户能够可以随时进行小学生兴趣延时班预约小程序的设计与开发的数据信息管理,特开发了小程序的设计与开发的管理系统。小学生兴趣延时班预约小程序的设计与开发的开发利用现有的成熟技术参考,以源代码为模板,分析功能调整与小学生兴趣延时班预约小程序的设计与开发的实际需求相结合,讨论了小学生兴趣延时班预约小程序的设计与开发的使用。开发环境开发说明：前端使用微信微信小程序开发工具：后端使用ssm：VU
ruby - 如何排除无效日期 ruby - 2
我想知道我应该引用什么异常名称。我的日期无效。我检查了文档，但找不到。BeginDate.new(day,month,year)Rescueexceptionnamestatements 最佳答案我认为您正在寻找ArgumentError.使用irb:>Date.new(2,-200,3)ArgumentError:invaliddatefrom(irb):11:in`new'from(irb):11所以beginDate.new(2,-200,3)rescueArgumentError#yourlogicend
LVGL V8动画 - 2
动画/*INITIALIZEANANIMATION 初始化一个动画*-----------------------*/lv_anim_ta;lv_anim_init(&a);/*MANDATORYSETTINGS 必选设置*------------------*//*Setthe"animator"function 设置“动画”功能*/lv_anim_set_exec_cb(&a,(lv_anim_exec_xcb_t)lv_obj_set_x);/*Setthe"animator"function*/lv_anim_set_var(&a,obj);/*Lengthoftheanim
(附源码)vue3.0＋.NET6实现聊天室(实时聊天SignalR) - 2
参考文章搭建文章gitte源码在线体验可以注册两个号来测试演示图：一.整体介绍　　介绍SignalR一种通讯模型Hub(中心模型，或者叫集线器模型)，调用这个模型写好的方法，去发送消息。　　内容有：　　　　①：Hub模型的方法介绍　　　　②：服务器端代码介绍　　　　③：前端vue3安装并调用后端方法　　　　④：聊天室样例整体流程：1、进入网站->调用连接SignalR的方法2、与好友发送消息->调用SignalR的自定义方法前端通过，signalR内置方法.invoke() 去请求接口3、监听接受方法（渲染消息）通过new signalR.HubConnectionBuilder().on
ruby - 尝试授权服务器到 ruby 中的服务器类型应用程序以访问 Google 日历时无效授权 - 2
我正在尝试为自己创建一个直接连接到我的日历的应用程序……但我从不想参与重新验证。我只想编写一次身份验证代码并完成它。授权码如下:key=Google::APIClient::PKCS12.load_key(SERVICE_ACCOUNT_PKCS12_FILE_PATH,PASSWORD)asserter=Google::APIClient::JWTAsserter.new(SERVICE_ACCOUNT_EMAIL,'https://www.googleapis.com/auth/calendar',key)@client=Google::APIClient.new@client.a
ruby - `DateTime.strptime` 返回工作日/时间字符串的无效日期 - 2
为什么Ruby的strptime不将其转换为DateTime对象:DateTime.strptime('Monday10:20:20','%A%H:%M:%S')#=>ArgumentError:invaliddate虽然这些有效？DateTime.strptime('Wednesday','%A')#=>#DateTime.strptime('10:20:20','%H:%M:%S')#=># 最佳答案这看起来像一个错误-minitech'scomment是正确的。不过，现在有一个解决方法(因为您可能希望它现在起作用):您可以在
vue 实现内容超出两行显示展开更多功能，可依据需求自定义任意行数！ - 2
平时开发中我们经常会遇到这样的需求，在一个不限高度的盒子中会有很多内容，如果全部显示用户体验会非常不好，所以可以先折叠起来，当内容达到一定高度时，显示展开更多按钮，点击即可显示全部内容，先来看看效果图：这样做用户体验瞬间得到提升，接下来看看具体细节。0">主要操作在内容这里{{item.username}},……展开更多样式大家可依据自己项目需求进行设计，这里就不贴了，主要说几个关键的。1、在data中定义三个属性isShowMore:false, //控制展开更多的显示与隐藏textHeight:null, //框中内容的高度status:false, //内容状态是否打开2.计算内容是否
ruby - Carrierwave + MiniMagick - 如何将动画 GIF 压缩到第一帧？ - 2
有人知道如何使用Carrierwave+MiniMagick将动画GIF压缩到第一帧吗？最佳答案我认为MiniMagick有一些变化，因为我只花了三个小时试图找出为什么Andrey的代码对我不起作用。我收到以下错误:ActiveRecord::RecordInvalid(Validationfailed:ImageFailedtomanipulatewithMiniMagick,maybeitisnotanimage?OriginalError:Command("mogrify-scene/var/folders/0o/0oqN