那些遇到过的问题

为什么在具有范围样式的Vue组件中破坏了CSS关键帧动画？

Pie*_*her 5 javascript css css-animations vue.js vuejs2

我正在尝试在Vue中实现CSS类型指示器。没有Vue，它看起来像这样：

.typing-indicator {
  background-color: #E6E7ED;
  width: auto;
  border-radius: 50px;
  padding: 20px;
  display: table;
  margin: 0 auto;
  position: relative;
  -webkit-animation: 2s bulge infinite ease-out;
          animation: 2s bulge infinite ease-out;
}
.typing-indicator:before, .typing-indicator:after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: -2px;
  height: 20px;
  width: 20px;
  border-radius: 50%;
  background-color: #E6E7ED;
}
.typing-indicator:after {
  height: 10px;
  width: 10px;
  left: -10px;
  bottom: -10px;
}
.typing-indicator span {
  height: 15px;
  width: 15px;
  float: left;
  margin: 0 1px;
  background-color: #9E9EA1;
  display: block;
  border-radius: 50%;
  opacity: 0.4;
}
.typing-indicator span:nth-of-type(1) {
  -webkit-animation: 1s blink infinite 0.3333s;
          animation: 1s blink infinite 0.3333s;
}
.typing-indicator span:nth-of-type(2) {
  -webkit-animation: 1s blink infinite 0.6666s;
          animation: 1s blink infinite 0.6666s;
}
.typing-indicator span:nth-of-type(3) {
  -webkit-animation: 1s blink infinite 0.9999s;
          animation: 1s blink infinite 0.9999s;
}

@-webkit-keyframes blink {
  50% {
    opacity: 1;
  }
}

@keyframes blink {
  50% {
    opacity: 1;
  }
}
@-webkit-keyframes bulge {
  50% {
    -webkit-transform: scale(1.05);
            transform: scale(1.05);
  }
}
@keyframes bulge {
  50% {
    -webkit-transform: scale(1.05);
            transform: scale(1.05);
  }
}
html {
  display: table;
  height: 100%;
  width: 100%;
}

body {
  display: table-cell;
  vertical-align: middle;
}
Run Code Online (Sandbox Code Playgroud) 
<div class="typing-indicator">
  <span></span>
  <span></span>
  <span></span>
</div>
Run Code Online (Sandbox Code Playgroud)

–来源：http：//jsfiddle.net/Arlina/gtttgo93/

问题在于，将scoped属性添加到组件的样式定义（<style lang="scss" scoped>）时动画不起作用。我认为这可能与应该在全局范围内声明的关键帧有关。

具有元素的元素.typing-indicator位于具有范围样式的组件的模板中。

有谁知道在使关键帧动画正常工作时如何允许我的组件具有范围化样式？

Win*_*ing 6

问题

问题在于Vue的Webpack加载器（vue-loader）如何在将ID添加到作用域选择器和其他标识符时错误地解析动画名称。这很重要，因为vue-loader的CSS作用域使用添加到元素的唯一属性来复制CSS作用域的行为。虽然关键帧名称会附加ID，但在作用域样式中的动画规则中不会引用关键帧。

您的CSS：

@-webkit-keyframes blink {
  50% {
    opacity: 1;
  }
}

@keyframes blink {
  50% {
    opacity: 1;
  }
}
@-webkit-keyframes bulge {
  50% {
    -webkit-transform: scale(1.05);
            transform: scale(1.05);
  }
}
@keyframes bulge {
  50% {
    -webkit-transform: scale(1.05);
            transform: scale(1.05);
  }
}

.typing-indicator {
  ...
  -webkit-animation: 2s bulge infinite ease-out;
          animation: 2s bulge infinite ease-out;
}

.typing-indicator span:nth-of-type(1) {
  -webkit-animation: 1s blink infinite 0.3333s;
          animation: 1s blink infinite 0.3333s;
}
.typing-indicator span:nth-of-type(2) {
  -webkit-animation: 1s blink infinite 0.6666s;
          animation: 1s blink infinite 0.6666s;
}
.typing-indicator span:nth-of-type(3) {
  -webkit-animation: 1s blink infinite 0.9999s;
          animation: 1s blink infinite 0.9999s;
}
Run Code Online (Sandbox Code Playgroud)

应该转换为：

@-webkit-keyframes blink-data-v-xxxxxxxx {
  50% {
    opacity: 1;
  }
}

@keyframes blink-data-v-xxxxxxxx {
  50% {
    opacity: 1;
  }
}
@-webkit-keyframes bulge-data-v-xxxxxxxx {
  50% {
    -webkit-transform: scale(1.05);
            transform: scale(1.05);
  }
}
@keyframes bulge-data-v-xxxxxxxx {
  50% {
    -webkit-transform: scale(1.05);
            transform: scale(1.05);
  }
}

.typing-indicator {
  ...
  -webkit-animation: 2s bulge-data-v-xxxxxxxx infinite ease-out;
          animation: 2s bulge-data-v-xxxxxxxx infinite ease-out;
}

.typing-indicator span:nth-of-type(1) {
  -webkit-animation: 1s blink-data-v-xxxxxxxx infinite 0.3333s;
          animation: 1s blink-data-v-xxxxxxxx infinite 0.3333s;
}
.typing-indicator span:nth-of-type(2) {
  -webkit-animation: 1s blink-data-v-xxxxxxxx infinite 0.6666s;
          animation: 1s blink-data-v-xxxxxxxx infinite 0.6666s;
}
.typing-indicator span:nth-of-type(3) {
  -webkit-animation: 1s blink-data-v-xxxxxxxx infinite 0.9999s;
          animation: 1s blink-data-v-xxxxxxxx infinite 0.9999s;
}
Run Code Online (Sandbox Code Playgroud)

但是，它只能转换为：

@-webkit-keyframes blink-data-v-xxxxxxxx {
  50% {
    opacity: 1;
  }
}

@keyframes blink-data-v-xxxxxxxx {
  50% {
    opacity: 1;
  }
}
@-webkit-keyframes bulge-data-v-xxxxxxxx {
  50% {
    -webkit-transform: scale(1.05);
            transform: scale(1.05);
  }
}
@keyframes bulge-data-v-xxxxxxxx {
  50% {
    -webkit-transform: scale(1.05);
            transform: scale(1.05);
  }
}

.typing-indicator {
  ...
  -webkit-animation: 2s bulge infinite ease-out;
          animation: 2s bulge infinite ease-out;
}

.typing-indicator span:nth-of-type(1) {
  -webkit-animation: 1s blink infinite 0.3333s;
          animation: 1s blink infinite 0.3333s;
}
.typing-indicator span:nth-of-type(2) {
  -webkit-animation: 1s blink infinite 0.6666s;
          animation: 1s blink infinite 0.6666s;
}
.typing-indicator span:nth-of-type(3) {
  -webkit-animation: 1s blink infinite 0.9999s;
          animation: 1s blink infinite 0.9999s;
}
Run Code Online (Sandbox Code Playgroud)

需要注意的是：在实际的转换中，动画规则中对关键帧名称的引用-data-v-xxxxxxxx最后缺少。这是错误。

当前（从47c3317开始），速记动画规则声明中的动画名称是通过从将动画规则除以任何空白字符[1]中获取第一个值来标识的。但是，animation属性的形式定义指出，动画名称可以出现在规则定义内的任何位置。

<single-animation> = <time> || <single-timing-function> || <time> || <single-animation-iteration-count> || <single-animation-direction> || <single-animation-fill-mode> || <single-animation-play-state> || [ none | <keyframes-name> ]

– animation形式语法[2]

因此，虽然动画声明有效，但vue-loader无法解析它。

解决方法

当前的解决方法是将动画名称移动到动画规则声明的开头。您的关键帧声明不需要更改，它们保留在作用域样式表中。您的动画声明现在应如下所示：

.typing-indicator {
  ...
  -webkit-animation: bulge 2s infinite ease-out;
          animation: bulge 2s infinite ease-out;
}
.typing-indicator span:nth-of-type(1) {
  -webkit-animation: blink 1s infinite 0.3333s;
          animation: blink 1s infinite 0.3333s;
}
.typing-indicator span:nth-of-type(2) {
  -webkit-animation: blink 1s infinite 0.6666s;
          animation: blink 1s infinite 0.6666s;
}
.typing-indicator span:nth-of-type(3) {
  -webkit-animation: blink 1s infinite 0.9999s;
          animation: blink 1s infinite 0.9999s;
}
Run Code Online (Sandbox Code Playgroud)

参考文献

归档时间：

查看次数：

1949 次

最近记录：

7 年，11 月 前
相关归档
了解React.js中数组子项的唯一键 549
不安全的JavaScript尝试使用URL访问框架 111
如何在Google Map中从纬度和经度获取地址位置.？ 65
将以秒为单位的时间间隔转换为更易读的形式 63
如何在页面加载时提高浏览器缩放级别？ 47
两个图像链接之间的下划线 34
删除之前设置的边框颜色 20
Params字段在$ router.push中是空的 14
为什么 vue 更改特定数组成员不更新 dom 6
如何在vue组件中显示所需的html 5？ 2
难疑归档
使用jQuery为复选框设置"选中"？ 3988
让现有的Git分支跟踪一个远程分支？ 3437
jQuery滚动到元素 2196
将字符串转换为datetime 2035
为什么在数组迭代中使用"for ... in"是一个坏主意？ 1761
在Bash中循环遍历一串字符串？ 1371
如何将键/值对添加到JavaScript对象？ 1270
如何撤消"git commit --amend"而不是"git commit" 1198
将文本粘贴到vim时关闭自动缩进 1119
如何检查对象是否在JavaScript中有密钥？ 1047