0

このアニメーションをIE9で動作させるのに問題があります。 https://c9.io/aaronkahlhamer/notification-bar/workspace/index.html

これ-ms-animation: slideDown 2.5s 1.0s 1 ease forwards;はIE9では機能しません。

@-webkit-keyframes slideDown {
    0%, 100% { -webkit-transform: translateY(-60px); }
    10%, 90% { -webkit-transform: translateY(0px); }
}
@-moz-keyframes slideDown {
    0%, 100% { -moz-transform: translateY(-60px); }
    10%, 90% { -moz-transform: translateY(0px); }
}
@-o-keyframes slideDown {
0%, 100% { -o-transform: translateY(-60px); }
    10%, 90% { -o-transform: translateY(0px); }
}
@-ms-keyframes slideDown {
    0%, 100% { -ms-transform: translateY(-60px); }
    10%, 90% { -ms-transform: translateY(0px); }
}

.notification {
    -webkit-transform: translateY(-60px);
    -webkit-animation: slideDown 2.5s 1.0s 1 ease forwards;

    -moz-transform:    translateY(-60px);
    -moz-animation:    slideDown 2.5s 1.0s 1 ease forwards;

    -o-transform:    translateY(-60px);
    -o-animation:    slideDown 2.5s 1.0s 1 ease forwards;

    -ms-transform:    translateY(-60px);
    -ms-animation:    slideDown 2.5s 1.0s 1 ease forwards;



    position:absolute;
    padding:7px 28px;
    background: rgb(253,243,214);
    font-size:14px;
    color:#6B644E;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    margin:20px 0 0 50%;
    text-align:center;
    white-space:nowrap;
    moz-box-shadow: 0px 0px 12px rgba(253,243,214,1.0);
    -webkit-box-shadow: 0px 0px 12px rgba(253,243,214,1.0);
box-shadow: 0px 0px 12px rgba(253,243,214,1.0);
    z-index:1;

}
.notification-draft-saved {left:-63px;}
.notification-draft-saved:after {content: "draft saved";}

CSSでそれが不可能な場合は、フォールバックが便利です。多分jQuery？

4

1 に答える 1

0

これを 5 行以下で実行できます。

$('.notification').css('top', '-60px').delay(1000).animate({
  top: '0px'
}, function(){
  $(this).delay(500).fadeTo(300, 0);   
});
于 2012-07-30T20:23:02.963 に答える