在我的 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;
}
因此，当从一个部分移动到另一个部分时，内容会从左向右滑动。但是对于某些导航，我想让它以另一种方式滑动......我不能只将它应用于按钮，因为我还想将它绑定(bind)到浏览器的后退和前进按钮，所以它需要应用到实际状态。
假设我有三种状态:
第 1 节、第 2 节、第 3 节。
从 1 移动到 2 或 3 使用正常动画，但从 3 移动到 2，或 2 到 1 使用反向动画。这是否有意义？
我怎样才能绑定(bind)动画来跟随它？
我确实将当前状态作为 body 标签上的一个类，例如:
<body ng-class="{ section1 : $state.includes('section1'), section2 : $state.includes('section2'), section3 : $state.includes('section3') }">所以想知道我是否可以使用它来应用它...虽然我认为这更像是了解当前状态和下一个状态然后应用类的情况。
最佳答案
这是我到目前为止所获得的效果非常好的:
$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;
}
但是代码有点麻烦，因为我不得不为每个可能的导航路径编写条件。
关于javascript - 在 AngularJS 中更改不同状态的动画，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35159865/