2

我最近在设计中添加了一个动画：

    .map > img:hover {
        -webkit-animation-name: MapFloatingChrome;
        -webkit-animation-duration: 3s;
        -webkit-animation-iteration-count: infinite;
        -webkit-animation-timing-function: ease-in-out;
        -moz-animation-name: MapFloatingFF;
        -moz-animation-duration: 3s;
        -moz-animation-iteration-count: infinite;
        -moz-animation-timing-function: ease-in-out;
    }

    @-webkit-keyframes MapFloatingChrome {
        from {-webkit-transform:translate(0, 0px);}
        65% {-webkit-transform:translate(0, -5px);}
        to {-webkit-transform: translate(0, 0px);}    
    }

    @-moz-keyframes MapFloatingFF {
        from {-moz-transform:translate(0, 0px);}
        65% {-moz-transform:translate(0, -5px);}
        to {-moz-transform: translate(0, 0px);}    
    }

    .grid > img:hover {
        -webkit-animation-name: GridScaleChrome;
        -webkit-animation-duration:3s;
        -webkit-animation-iteration-count:infinite;
        -webkit-animation-timing-function:ease-in-out;
        -moz-animation-name: GridScaleFF;
        -moz-animation-duration:3s;
        -moz-animation-iteration-count:infinite;
        -moz-animation-timing-function:ease-in-out;
    }

    @-webkit-keyframes GridScaleChrome {
        from {-webkit-transform: scale(0.9);}
        65% {-webkit-transform: scale(1.2);}
        to {-webkit-transform: scale(0.9);}    
    }

    @-moz-keyframes GridScaleFF{
        from {-moz-transform: scale(0.9);}
        65% {-moz-transform: scale(1.2);}
        to {-moz-transform: scale(0.9);}    
    }

这个动画效果很好，但是，在页面上我有一个刷新按钮，它执行部分回发，这会导致控制台出错：

updateHeadStyles    @   Telerik.Web.UI.WebResource.axd?_TSM_HiddenField_=ctl00_ScriptManager1_TSM&compress=1&_TSM_CombinedS…:4597
set_styles  @   Telerik.Web.UI.WebResource.axd?_TSM_HiddenField_=ctl00_ScriptManager1_TSM&compress=1&_TSM_CombinedS…:4398
Sys$Component$_setProperties    @   Telerik.Web.UI.WebResource.axd?_TSM_HiddenField_=ctl00_ScriptManager1_TSM&compress=1&_TSM_CombinedS…:6
Sys.Component.create    @   Telerik.Web.UI.WebResource.axd?_TSM_HiddenField_=ctl00_ScriptManager1_TSM&compress=1&_TSM_CombinedS…:6
(anonymous function)    @   VM1634:2
add_init    @   Telerik.Web.UI.WebResource.axd?_TSM_HiddenField_=ctl00_ScriptManager1_TSM&compress=1&_TSM_CombinedS…:6
(anonymous function)    @   VM1634:1
_loadScriptsInternal    @   Telerik.Web.UI.WebResource.axd?_TSM_HiddenField_=ctl00_ScriptManager1_TSM&compress=1&_TSM_CombinedS…:15
_loadScriptsInternal    @   Telerik.Web.UI.WebResource.axd?_TSM_HiddenField_=ctl00_ScriptManager1_TSM&compress=1&_TSM_CombinedS…:15
_loadScriptsInternal    @   Telerik.Web.UI.WebResource.axd?_TSM_HiddenField_=ctl00_ScriptManager1_TSM&compress=1&_TSM_CombinedS…:15
_nextSession    @   Telerik.Web.UI.WebResource.axd?_TSM_HiddenField_=ctl00_ScriptManager1_TSM&compress=1&_TSM_CombinedS…:15
_loadScriptsInternal    @   Telerik.Web.UI.WebResource.axd?_TSM_HiddenField_=ctl00_ScriptManager1_TSM&compress=1&_TSM_CombinedS…:15
_scriptLoadedHandler    @   Telerik.Web.UI.WebResource.axd?_TSM_HiddenField_=ctl00_ScriptManager1_TSM&compress=1&_TSM_CombinedS…:15
(anonymous function)    @   Telerik.Web.UI.WebResource.axd?_TSM_HiddenField_=ctl00_ScriptManager1_TSM&compress=1&_TSM_CombinedS…:6
_scriptLoadHandler  @   Telerik.Web.UI.WebResource.axd?_TSM_HiddenField_=ctl00_ScriptManager1_TSM&compress=1&_TSM_CombinedS…:6
(anonymous function)    @   Telerik.Web.UI.WebResource.axd?_TSM_HiddenField_=ctl00_ScriptManager1_TSM&compress=1&_TSM_CombinedS…:6
b   @   Telerik.Web.UI.WebResource.axd?_TSM_HiddenField_=ctl00_ScriptManager1_TSM&compress=1&_TSM_CombinedS…:6

错误信息如下：

Telerik.Web.UI.WebResource.axd?_TSM_HiddenField_=ctl00_ScriptManager1_TSM&compress=1&_TSM_CombinedS…:4597 Uncaught SyntaxError: 无法在 'CSSStyleSheet' 上执行 'insertRule': 无法解析规则' 65% {-webkit-transform:translate(0, -5px);}'

我的猜测是问题出在 65 上，所以我的问题是：如何修改我的 CSS 规则以便即使在部分回发之后也可以处理它们？

4

1 回答 1

0

此错误通常来自<head>使用 RadAjax 控件时的 CSS 注释。

由于您没有，我想特殊符号（可能是@）是导致解析 RadAjaxManager 失败的原因。

要修复它，请尝试：

  • 将这些 CSS 规则移动到外部样式表而不是内联

  • EnablePageHeadUpdate 将RadAjax 控件 的属性设置为false.

于 2016-06-21T14:10:09.730 回答