1

この JSFiddle を参照してください: http://jsfiddle.net/5mUsH/3/

AngularJS と jQuery で本当に単純な JavaScript アニメーションを実行しようとしています。(古いブラウザーをサポートし、より複雑なアニメーションも実行したいので、CSS アニメーションは使用していません。) フィドルのコードは AngularJS ユーザー ガイドからのものです (ただし、少し簡略化されています): http://docs.angularjs.org/ガイド/アニメーション

しかし、うまくいきません！DOM はすぐに (アニメーションなしで) 更新されます。何か案は？ありがとう！

JSFiddle からの関連するマークアップは次のとおりです。

<div class="sample" ng-show="checked">
  Visible...
</div>

そして JavaScript:

angular.module('App', ['ngAnimate']).animation('.sample', function() {
    return {
        enter : function(element, done) {
            element.css('opacity',0);
            jQuery(element).animate({
                opacity: 1
            }, done);

            // optional onDone or onCancel callback
            // function to handle any post-animation
            // cleanup operations
            return function(isCancelled) {
                if(isCancelled) {
                    jQuery(element).stop();
                }
            }
        },
        leave : function(element, done) {
            element.css('opacity', 1);
            jQuery(element).animate({
                opacity: 0
            }, done);

            // optional onDone or onCancel callback
            // function to handle any post-animation
            // cleanup operations
            return function(isCancelled) {
                if(isCancelled) {
                    jQuery(element).stop();
                }
            }
        },
    }
});
4

1 に答える 1

4

ng-showがアニメーションをオーバーライドしていたため、少し異なる方法でアプローチしました。あなたはjQueryを使いたかったので：

http://jsfiddle.net/wiredprarie/5tFCZ/1/

angular.module('App', ['ngAnimate']).animation('.sample', function () {
    return {
        addClass: function (element, className, done) {
            if (className === 'hidden') {
                jQuery(element)
                    .css({
                    opacity: 1
                })
                    .animate({
                    opacity: 0
                }, 500, done);
            } else {
                done();
            }
        },
        removeClass: function (element, className, done) {
            if (className === 'hidden') {
                jQuery(element)
                    .css({
                    opacity: 0
                })
                    .animate({
                    opacity: 1
                }, 500, done);
            } else {
                done();
            }
        }
    }
});

基本的に、hiddenCSS クラスが切り替えられ、対応するアニメーション コードが実行されます。

于 2014-02-01T03:05:46.553 に答える