Question

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

    .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＆amp; compress = 1＆amp; _TSM_CombinedS ...：4597 Uncaught SyntaxError：无法执行'insertRule'on 'CSSStyleSheet'：无法解析规则' 65％{-webkit-transform：translate（0，-5px）;}'

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

Answer 1

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

由于你没有，我认为特殊符号（可能是@）是解析RadAjaxManager失败的原因。

要解决此问题，请尝试：

将这些CSS规则移至外部样式表而非内联
将RadAjax控件的EnablePageHeadUpdate属性设置为false。

部分回发与动画中的数字兼容

1 个答案: