Question

我在AngularJS应用程序中转换状态时应用了以下CSS动画：

.content.ng-enter,
.content.ng-leave
{
    -webkit-animation-timing-function: ease-out;
    -webkit-animation-duration: 350ms;
    -moz-animation-timing-function: ease-out;
    -moz-animation-duration: 350ms;
}
.content.ng-leave
{
    -webkit-transform: translateX(-100%);
    -webkit-animation-name: slideouttoleft;
    -moz-transform: translateX(-100%);
    -moz-animation-name: slideouttoleft;
}
.content.ng-enter
{
    -webkit-transform: translateX(0);
    -webkit-animation-name: slideinfromright;
    -moz-transform: translateX(0);
    -moz-animation-name: slideinfromright;
}
.content.ng-leave.reverse
{
    -webkit-transform: translateX(100%);
    -webkit-animation-name: slideouttoright;
    -moz-transform: translateX(100%);
    -moz-animation-name: slideouttoright;
}
.content.ng-enter.reverse
{
    -webkit-transform: translateX(0);
    -webkit-animation-name: slideinfromleft;
    -moz-transform: translateX(0);
    -moz-animation-name: slideinfromleft;
}

因此，当从一个部分移动到另一个部分时，内容从左向右滑动。但是对于某些导航，我想让它以相反的方式滑动...我不能只将它应用到按钮上，因为我还想将它绑定到浏览器的后退和前进按钮，所以它需要应用到实际状态。

所以我想说我有三种状态：

第1节第2节第3节。

从1移动到2或3使用普通动画，但是从3移动到2或2移动到使用反向动画。如果这有意义吗？

我怎么能把这些动画捆绑起来呢？

我确实将当前状态作为body标签上的类，如：

<body ng-class="{ section1 : $state.includes('section1'), section2 : $state.includes('section2'), section3 : $state.includes('section3') }">所以我想知道我是否可以用它来应用它...虽然我认为这更像是一个知道当前状态是什么以及下一个状态是什么然后再应用一个类的情况。

Answer 1

这是我迄今为止所做的非常有效的方法：

$rootScope.$on("$stateChangeStart",   function(evt, to, toP, from, fromP)      
{
    $('html').removeClass('goLeft').removeClass('goRight');

    if( to.name == 'section1' && from.name == 'section2' || to.name == 'section1' && from.name == 'section3' )
    {
        // go left
        $('html').addClass('goLeft');
    }
    else if( to.name == 'section3' && from.name == 'section1' || to.name == 'section3' && from.name == 'section2' )
    {
        // go right
        $('html').addClass('goRight');
    }
    else if( to.name == 'section2' && from.name == 'section1' )
    {
        // go right
        $('html').addClass('goRight');
    }
    else if( to.name == 'section2' && from.name == 'section3' )
    {
        // go left
        $('html').addClass('goLeft');
    }
});

然后我使用前缀来使用不同的CSS动画：

[ui-view=content].ng-enter,
[ui-view=content].ng-leave
{
    -webkit-animation-timing-function: ease-out;
    -webkit-animation-duration: .2s;
    -moz-animation-timing-function: ease-out;
    -moz-animation-duration: .2s;
}
.goLeft [ui-view=content].ng-leave
{
    -webkit-transform: translateX(-100%);
    -webkit-animation-name: slideouttoleft;
    -moz-transform: translateX(-100%);
    -moz-animation-name: slideouttoleft;
}
.goLeft [ui-view=content].ng-enter
{
    -webkit-transform: translateX(0);
    -webkit-animation-name: slideinfromright;
    -moz-transform: translateX(0);
    -moz-animation-name: slideinfromright;
}
.goRight [ui-view=content].ng-leave
{
    -webkit-transform: translateX(100%);
    -webkit-animation-name: slideouttoright;
    -moz-transform: translateX(100%);
    -moz-animation-name: slideouttoright;
}
.goRight [ui-view=content].ng-enter
{
    -webkit-transform: translateX(0);
    -webkit-animation-name: slideinfromleft;
    -moz-transform: translateX(0);
    -moz-animation-name: slideinfromleft;
}

但是代码有点讨厌，因为我必须为每个可能的导航路径编写条件。

在AngularJS中更改不同状态的动画

1 个答案: