文章/答案/技术大牛

发布

社区首页 >问答首页 >动画中数字的部分回发兼容性

问动画中数字的部分回发兼容性
EN

Stack Overflow用户

提问于 2016-06-15 14:27:31

回答 1查看 104关注 0票数 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);}    
    }

但是，这个动画工作得很好，在页面上我有一个Refresh按钮，它执行部分回发，这会导致控制台中的一个错误：

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未执行的SyntaxError:未能在CSSStyleSheet上执行'insertRule‘：未能解析规则’65% {-webkit-transform:transform(0，-5px);}‘

我的猜测是，问题在于65，所以我的问题是:我如何修改我的CSS规则，以便即使在部分回发后也可以处理这些规则？

css

asp.net

telerik

partial-postback

回答 1

Stack Overflow用户

发布于 2016-06-21 14:10:09

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

由于没有，我想特殊的符号(很可能是@)会导致解析RadAjaxManager失败。

要解决这个问题，请尝试：

将这些CSS规则移动到外部样式表，而不是内联
将RadAjax控件的RadAjax属性设置为false。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/37838291

复制

相似问题

问动画中数字的部分回发兼容性
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问动画中数字的部分回发兼容性EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问动画中数字的部分回发兼容性
EN