1

何らかの理由で、継続時間は機能しますが、アニメーションは機能しません。また、Angular-uiui-animateを機能させることもできませんでした。

最初にテストのための単純な呼び出しを行うだけです。

$('#event-modal').toggleClass('active', 500);

継続時間は機能しますが、アニメーションは機能しません。

CSS：

#event-modal {
    position:absolute;
    top: 20%;
    left: 30%;  
    width:0;
    height:0;
    z-index:1029;
    background:#fff;
    border-radius:5px;
    display:none;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;  
    -webkit-box-shadow: 3px 6px 11px 3px rgba(0,0,0,0.25);
    -moz-box-shadow: 3px 6px 11px 3px rgba(0,0,0,0.25);
    box-shadow: 3px 6px 11px 3px rgba(0,0,0,0.25);

}

#event-modal.active { display:block;width:100%; height:100%; } /* Or a hard pixel value */

jQuery1.8.2がjQueryUI1.9.1（完全なビルド）の前にロードされていること、jQueryがにロードされていることscope、および重複するスクリプト呼び出しがないことを確認しました。

私の電話の後もやって$scope.$apply()います。

angle-uiを使用してui-animateを試してみると、クラスが要素に追加されず、スクリプトが正しい順序で呼び出されていることがもう一度確認されます。

必要に応じて、さらにコードを投稿できます。

ありがとう！

4

2 に答える 2

0

何らかの理由で、jQuery fullCalendar（clickedEventポップアップをトリガーするもの）がvisibility: hiddenインラインを設定しましたが、要素を手動で編集しない限り、Chromeインスペクターに表示されませんでした。本当に変だ。単純なオーバーライドを実行する必要がありました。

#event-modal.active {
    z-index:1029;
    opacity:1;
    width:260px;
    height:489px;
    visibility: visible !important;

    &.full-view {
    width:100%;
    height:100%;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
于 2012-12-12T23:11:02.303 に答える
0

display:none->がある場合、CSSは移行しませんdisplay:block

この他のSOの質問を参照してください

于 2013-01-05T05:45:06.973 に答える