Question

我想在play框架中使用动画刷新glyphicon：

$( document ).ready( function() {
  $( "#update" ).on( "click", function( e ) {
    var $icon = $( this ).find( ".glyphicon.glyphicon-refresh" ),
      animateClass = "glyphicon-refresh-animate";

    $icon.addClass( animateClass );
    // setTimeout is to indicate some async operation
    window.setTimeout( function() {
      $icon.removeClass( animateClass );
    }, 2000 );
});

.glyphicon-refresh-animate {
   -webkit-animation-name: rotateThis;
   -webkit-animation-duration: 2s;
   -webkit-animation-iteration-count: infinite;
   -webkit-animation-timing-function: linear;
}

@-webkit-keyframes "rotateThis" {
 from {
        -webkit-transform: rotate( 0deg );
    }
 to  {
        -webkit-transform: rotate( 360deg );
    }
}

<a id="update" href="#"><i class="glyphicon glyphicon-refresh"></i></a>

但我收到此错误：预期'}'但找到'@'

Answer 1

我希望这段代码能为您提供帮助，您也可以找到缺少括号和关键帧动画名称的位置。

$(document).ready( function() {
  $("#update").on("click", function() {
    var $icon = $(this).find(".glyphicon.glyphicon-refresh"), animateClass = "glyphicon-refresh-animate";
    $icon.addClass(animateClass);
    window.setTimeout(function() {
      $icon.removeClass(animateClass);
    }, 2000);
   });
});

.glyphicon-refresh-animate {
 -webkit-animation: rotateThis 2s linear infinite;
 animation: rotateThis 2s linear infinite;
}
@-webkit-keyframes rotateThis{
 	from {-webkit-transform: rotate(0deg);}
 	to{-webkit-transform: rotate(360deg);}
}
@keyframes rotateThis{
 	from {transform: rotate(0deg);}
 	to{transform: rotate(360deg);}
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<br>
<div class="container">
	<a id="update" href="#"><i class="glyphicon glyphicon-refresh"></i></a>
</div>

Answer 2

问题可能是@中有@-webkit-keyframes个符号。如果此定义在Twirl模板内，那么您将拥有问题。

要转义符号，请使用此页面中描述的@@：https://www.playframework.com/documentation/2.5.x/ScalaTemplates

因为@是一个特殊的角色，你有时需要逃避它。使用@@
执行此操作

更好的方法是不要在模板中使用CSS。

@ -webkit-keyframes在play框架中不起作用

2 个答案: