Question

我有一些jquery执行并向div添加一个类。此类具有运行动画的样式。通过IE浏览器在我的本地机器上完美运行（在Chrome上不是很棒，但在Firefox上很好），但在我发布时它会在IE中停止动画，但不会停止Chrome或Firefox。我已经在IE中设置了尽可能低的隐私和安全设置，因此不确定它是什么。

任何人都知道为什么？CSS动画相当新 - 我可能不是最好的方式。我试图通过一种＆＃34;发送＆＃34;来激活表单。办法。我的主要问题是它不是在IE中运行，而是仅在已发布的站点上运行。第二个较小的问题是它在Chrome上的效果不如在另一个上那么好2 - 我该怎么做才能改变它？

这是我的标记：

<form id="emailForm" role="form">
<div id="emailDiv">
    <fieldset>
        <div class="form-group" id="fg1">
            <label for="emailSubject">Subject</label>
            <input id="emailSubject" placeholder="Enter Subject" class="form-control" />
        </div>
        <div class="form-group" id="fg2">
            <label for="emailMessage">Message</label>
            <textarea id="emailMessage" placeholder="Enter Message" class="form-control" rows="20"></textarea>
        </div>
    </fieldset>
<div class="form-group" id="fg3">
    <div class="col-md-offset-2 col-md-10">
        <input type="button" value="Send" id="emailSubmit" onclick="javascript: SendPlayerEmail();" class="btn btn-default" />
    </div>
</div>
</div>
</form>

<div id="emailSent" style="display:none">
    <span>Email sent :o)</span>
</div>

这是我的剧本：

<script type="text/javascript">
function EmailDto() {
    return {
        subject: $('#emailSubject').val(),
        body: $('#emailMessage').val()
    };
}


function SendPlayerEmail() {
    //debugger;
    var d = JSON.stringify(new EmailDto());
    var xhr = $.ajax({
        beforeSend: function (x, ss) {
            $('#emailSubmit').prop('disabled', true);
        },
        url: rootUrl + 'api/PlayerGame/SendEmail',// "/api/PlayerGame/GetGames",
        data:d,
        type: "POST",
        dataType:"json",
        contentType: "application/json; charset=utf-8",
    });
    $.when(xhr).done(function (data) {
        $('#emailDiv').one('animationend webkitAnimationEnd MSAnimationEnd', function (e) {
            HideEmail();
        })
        $('#emailDiv').addClass('sendEmail');
    });
    $.when(xhr).fail(function (response) {
        alert('There was a problem - sorry. Use the contact page.');
        alert(response.responseText);
        $('#emailSubmit').prop('disabled', false);
    })

}

function AfterEmailSend() {
    $('#emailDiv').fadeOut(function () {
        $('#emailSent').slideDown();
    });
}
function HideEmail() {
    //debugger;
    AfterEmailSend();
}


</script>

这是我的CSS：

@-webkit-keyframes demo {
50% {

-webkit-transform:translate(50%,0) scale(0.7,0.7);
}

100% {

-webkit-transform:translate(60%,-100%) scale(0.5,0.5);
height:0;
    visibility:hidden;
}
}

@-moz-keyframes demo {
50% {
-moz-transform:translate(50%,0) scale(0.7,0.7);
}
100% {
-moz-transform:translate(60%,-100%) scale(0.5,0.5);
height:0;
    visibility:hidden;
}
}

@-ms-keyframes demo {
50% {
-ms-transform:translate(50%,0) scale(0.7,0.7);
}
100% {
-ms-transform:translate(60%,-100%) scale(0.5,0.5);
height:0;
    visibility:hidden;
}
}

@-o-keyframes demo {
50% {
-o-transform:translate(50%,0) scale(0.7,0.7);
}
100% {
-o-transform:translate(60%,-100%) scale(0.5,0.5);
height:0;
    visibility:hidden;
}
}

@keyframes demo {
50% {
-webkit-transform:translate(50%,0) scale(0.7,0.7);
-o-transform:translate(50%,0) scale(0.7,0.7);
-moz-transform:translate(50%,0) scale(0.7,0.7);
-ms-transform:translate(50%,0) scale(0.7,0.7);
transform:translate(50%,0) scale(0.7,0.7);
}
100% {
-webkit-transform:translate(60%,-100%) scale(0.5,0.5);
-o-transform:translate(60%,-100%) scale(0.5,0.5);
-moz-transform:translate(60%,-100%) scale(0.5,0.5);
-ms-transform:translate(60%,-100%) scale(0.5,0.5);
transform:translate(60%,-100%) scale(0.5,0.5);
height:0;
    /*visibility:hidden;*/
}
}

div.sendEmail {
-webkit-animation-name: demo;
-webkit-animation-duration: 900ms;
-webkit-animation-iteration-count: 1;
-webkit-animation-fill-mode:forwards;
-webkit-animation-timing-function: ease-in-out;
-ms-animation-name: demo;
-ms-animation-duration: 900ms;
-ms-animation-iteration-count: 1;
-ms-animation-fill-mode:forwards;
-ms-animation-timing-function: ease-in-out;
-moz-animation-name: demo;
-moz-animation-duration: 900ms;
-moz-animation-iteration-count: 1;
-moz-animation-fill-mode:forwards;
-moz-animation-timing-function: ease-in-out;
animation-name: demo;
animation-duration: 900ms;
animation-iteration-count: 1;
animation-fill-mode:forwards;
animation-timing-function: ease-in-out;
}

从VS2013（IIS Express）可以正常工作，但在发布时，甚至在本地发布到我自己的机器上，它对IE11不起作用，但对其他2仍然有效。所有相关文件似乎都已发布 - 可以＆＃39;看不到任何东西

当我运行本地发布的版本时，ajax的东西可以工作，但动画并没有发生。如果我然后单击返回textarea，然后我得到fadeOut和slideDown但不是动画。如果我没有点击任何内容，那么它就不会做任何事情。

有什么想法吗？

感谢

Answer 1

发现了这个：http://www.markskowrondesign.com/blog/are-your-css3-animations-broken-in-ie10-and-ie11/

当我将我的关键帧放在一个单独的css中并将它们放在顶部并将它们分开捆绑时（因为我使用的是MVC），它运行正常。

仍然不知道为什么Chrome的渲染效果不如其他2

欢呼声

部署后CSS3动画无法正常工作

1 个答案: