Javascript 使用元素insde ng view为ng view的父div设置角度动画_Javascript_Angularjs_Angularjs Directive_Angular Ui Router_Css Animations

Javascript 使用元素insde ng view为ng view的父div设置角度动画

javascript angularjs

Javascript 使用元素insde ng view为ng view的父div设置角度动画,javascript,angularjs,angularjs-directive,angular-ui-router,css-animations,Javascript,Angularjs,Angularjs Directive,Angular Ui Router,Css Animations,是否可以使用ng视图内$state上的指令对ng视图外的div（背景色）设置css动画 ng视图具有用于布线的css动画如果我没有为div设置动画，那么ng view动画可以正常工作，但是。。如果我将动画类添加到div（bgId），则不会触发路由动画下面是一个html示例：（作为示例添加的按钮-通常位于模板页面中，例如home.html/login.html） //指令.js .directive('swapcolour', function ($rootScope, $state) {

是否可以使用ng视图内$state上的指令对ng视图外的div（背景色）设置css动画

ng视图具有用于布线的css动画

如果我没有为div设置动画，那么ng view动画可以正常工作，但是。。如果我将动画类添加到div（bgId），则不会触发路由动画

下面是一个html示例：（作为示例添加的按钮-通常位于模板页面中，例如home.html/login.html）

//指令.js

.directive('swapcolour', function ($rootScope, $state) {
    var pageArr = [{home:'redBg'},{login:'blueBg'}];

    return function (scope, element, attrs) {        

        var nextPageNum = attrs.nxtpage;           
        var obj = pageArr[nextPageNum];
        var item = Object.keys(obj);
        var objItem = obj[item];

        element.bind('click', function () {
            $state.transitionTo(item[0]);      
            $rootScope.$$childHead.colorVal = objItem;
        });
    }
}])

我不知道为什么它失败了。有什么想法吗？？我不熟悉指令。（试图设置plunker，但在使用它时遇到问题）

我修复了它！-我想。基本上，在完全剥离应用程序的骨骼之后，我成功地构建了一个plunker并使其正常工作

毕竟我的代码没有问题

<body ng-app="app" ng-controller="MainCtrl"> 
    <div id="bgId" class="{{colorVal}}">
        <ion-nav-view animation="slide-left-right">
        </ion-nav-view>
    </div>
</body>

然后我在我的应用程序上尝试了这段代码，但仍然不起作用！因此，我尝试用plunker（1.0.0-rc.1）中使用的文件替换我的ionic.bundle.js和ionic.css文件（orig是使用npm安装的），我的应用程序运行正常：）

希望这能帮助将来遇到困难的其他人。

您是否同时运行动画？你能提供更多的信息吗？你在使用ngAnimate吗？嗨，@jguimaraes我在使用Ionic、ui.router、ngAnimate等。我正在尝试同时运行css3动画（这可能吗？？），我已经用ui sref和ng click两种方法尝试过了（给出了相同的结果）。我目前正在一个按钮上使用一个自定义指令来激活页面路由，并更新{{colorVal}}变量（这将激活ccs动画）。

.directive('swapcolour', function ($rootScope, $state) {
    var pageArr = [{home:'redBg'},{login:'blueBg'}];

    return function (scope, element, attrs) {        

        var nextPageNum = attrs.nxtpage;           
        var obj = pageArr[nextPageNum];
        var item = Object.keys(obj);
        var objItem = obj[item];

        element.bind('click', function () {
            $state.transitionTo(item[0]);      
            $rootScope.$$childHead.colorVal = objItem;
        });
    }
}])

<body ng-app="app" ng-controller="MainCtrl"> 
    <div id="bgId" class="{{colorVal}}">
        <ion-nav-view animation="slide-left-right">
        </ion-nav-view>
    </div>
</body>