为什么 CSS 关键帧动画在具有作用域样式的 Vue 组件中被破坏? [英] Why are CSS keyframe animations broken in Vue components with scoped styling?

问题描述

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

.typing-indicator {背景颜色:#E6E7ED；宽度:自动；边框半径:50px；填充:20px；显示:表；边距:0 自动；位置:相对；-webkit-animation:2s 凸起无限缓出；动画:2s 凸起无限缓出；}.typing-indicator:before, .typing-indicator:after {内容: '';位置:绝对；底部:-2px；左:-2px；高度:20px；宽度:20px；边界半径:50%；背景颜色:#E6E7ED；}.typing-indicator:after {高度:10px；宽度:10px；左:-10px；底部:-10px；}.typing-indicator 跨度 {高度:15px；宽度:15px；向左飘浮;边距:0 1px；背景色:#9E9EA1；显示:块；边界半径:50%；不透明度:0.4；}.typing-indicator span:nth-of-type(1) {-webkit-animation:1s 闪烁无限 0.3333s；动画:1s 无限闪烁 0.3333s；}.typing-indicator span:nth-of-type(2) {-webkit-animation:1s 闪烁无限 0.6666s；动画:1s 无限闪烁 0.6666s；}.typing-indicator span:nth-of-type(3) {-webkit-animation:1s 闪烁无限 0.9999s；动画:1s 无限闪烁 0.9999s；}@-webkit-keyframes 闪烁 {50%{不透明度:1；}}@keyframes 闪烁 {50%{不透明度:1；}}@-webkit-keyframes 凸起 {50%{-webkit-transform: scale(1.05);变换:比例(1.05)；}}@keyframes 凸起 {50%{-webkit-transform: scale(1.05);变换:比例(1.05)；}}html {显示:表；高度:100%；宽度:100%；}身体 {显示:表格单元格；垂直对齐:中间；}

<span></span><span></span><span></span>

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

问题是将 scoped 属性添加到组件的样式定义 (