首页 文章

角度动画：如何在动画开始和结束时向特定元素添加额外的类？

提问于
浏览 次
2

我正在使用状态路由器在页面之间进行转换 . 我需要在动画运行时向 <body> 添加一个类，并在完成输入和离开动画后将其删除 .

我试图创建一个注入 $animate 服务的指令 . 然后我开始按照文档中的建议收听进入和离开事件 .

The html:

<div class="ui-view-container">
    <div ui-view style="height:100%;" class="suffle-page" suffle-page></div>
</div>

The directive:

;(function(){
    angular.module('app')
        .directive('sufflePage',function($animate){
            var $body = $('body');

            return {
                link: function (scope, element) {
                    //var $el = $('[ui-view]');
                    $animate.enter(element,
                        function callback(element, phase) {
                            //$body.addClass('animating');
                        }
                    );
                    $animate.leave( element, function(){
                        function callback(element, phase) {
                            //$body.removeClass('animating')
                        }
                    })
                }
            }
        });
})();

然后我有CSS动画这些视图//阻止移动设备中的动画更快的性能

.ui-view-container {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
}

[ui-view].ng-enter, [ui-view].ng-leave {
  ...
}

[ui-view].ng-enter {
  ..
}

[ui-view].ng-enter-active {
  ..
}

[ui-view].ng-leave {
  ...
}

[ui-view].ng-leave-active {
  ...
}

body.animating{
/*this element is outter of the animation that's why i must append a class to the top level element. in this case body*/
  .special-element{
    display: none;
  }
}

在 $animate.enter(element...) 会抛出错误：

TypeError: Cannot read property 'createDocumentFragment' of null

有帮助吗？

angularjs angular-ui-router

1 回答

  • 1

    我误解了$ animate.enter和$ animate.leave的使用和**我也使用了不正确的angular版本，因为$ animate.leave是1.4.x版本的一部分，我的项目是在1.3版本之上构建的0.0 .

    更新angular.js和angular-animate.js后，我所要做的就是1）创建将监视输入的指令：start并输入：end events 2）将指令加载到项目中3）并编写一段代码在动画期间将类添加到正文中 .

    I hope it helps.

    .directive('sufflePage',function($animate){

        var $body = $('body');

        return {
            link: function (scope, element) {
                if (!element){
                    return;
                }

                /***
                 * when the ui-view that is `entering` the page stars it adds the animating class to body
                 * when it leaves it removes the animating from the body class
                 *
                 * IMPORTANT: this works because the enter and exit animation are triggered in parallel with the same duration
                 *
                 */
                $animate.on('enter', element,
                    function callback(element, phase) {
                        if (phase == 'start'){
                            $body.addClass('animating');
                        } else {
                            $body.removeClass('animating');
                        }
                    }
                );

                scope.$on('$destroy', function(){
                    $animate.off('enter',element);
                });
            }
        }
    回复于

相关问题