Question

单击按钮启动AJAX调用时，按钮中会显示微调器。当AJAX回调函数完成时，微调器被移除。像FireFox 29中的冠军一样旋转，Chrome 34.0.1847.132中没有动画。图标显示然后隐藏，但不会旋转。

.spinner {
  position: absolute;
  left: 2vw;
  top: 2;
  opacity: 0;
  max-width: 0;
  -webkit-transition: opacity 0.25s, max-width 0.45s;
  -moz-transition: opacity 0.25s, max-width 0.45s;
  -o-transition: opacity 0.25s, max-width 0.45s;
  transition: opacity 0.25s, max-width 0.45s; 
}

.has-spinner.active {
  cursor:progress;
}

.has-spinner.active .spinner {
  opacity: 1;
  max-width: 50px; 
}  

.icon-refresh-animate {
  animation-name: rotateThis;
  animation-duration: .5s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

@keyframes rotateThis {
from { transform: scale( 1 ) rotate( 0deg );   }
to   { transform: scale( 1 ) rotate( 360deg ); }
}

@-webkit-keyframes rotateThis {
  from { transform: scale( 1 ) rotate( 0deg );   }
  to   { transform: scale( 1 ) rotate( 360deg ); }
}

感谢您的光临。

Answer 1

您应该为-webkit和animation添加transform供应商前缀，以使其适用于Chrome和Safari。查看此文章：http://css3.bradshawenterprises.com/which-vendor-prefixes-are-needed/。所以，你的CSS应该是这样的：

.icon-refresh-animate {
  -webkit-animation-name: rotateThis;
  -webkit-animation-duration: .5s;
  -webkit-animation-iteration-count: infinite;
  -webkit animation-timing-function: linear;
  animation-name: rotateThis;
  animation-duration: .5s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

@-webkit-keyframes rotateThis {
  from { -webkit-transform: scale( 1 ) rotate( 0deg );   }
  to   { -webkit-transform: scale( 1 ) rotate( 360deg ); }
}

还有一个简短的 DEMO ，它表明只有在Chrome中添加-webkit供应商前缀才有效。

Button Spinner在Firefox中无法在Chrome中旋转

1 个答案: