Question

我使用angularJS 1.6.6和uirouter 1.0.11。我处于HTML5模式

我有嵌套状态：

$stateProvider.state({
  name: 'home',
  url: 'home/',
  component: 'home',
})

$stateProvider.state({
  name: 'inscription',
  url: 'inscription/',
  component: 'inscription',
})

$stateProvider.state({
  name: 'home.profile',
  url: 'home/profile',
  component: 'profile',
})

$stateProvider.state({
  name: 'home.account',
  url: 'home/account',
  component: 'account',
})

这是我的身体html：

<ui-view class="body-block-animation"/>

这是我的html for home：

<div class="home">
  <ui-view class="home-page-animation"/>
</div>

我有一些css为每个级别的路由创建不同的动画，这里有一个作为示例：

.home-page-animation {

  &.ng-enter, &.ng-leave {
    position: absolute;
    -webkit-transition:all .5s ease-in-out;
    left: 0;
    right: 0;
    -moz-transition:all .5s ease-in-out;
    -o-transition:all .5s ease-in-out;
    transition:all .5s ease-in-out;
  }

  &.ng-enter {
    opacity: 0;
  }

  &.ng-enter-active {
    opacity: 1;
  }

  &.ng-leave {
    opacity: 1;
  }

  &.ng-leave-active {
    opacity: 0;
  }

}

我登陆www.example.com/home/profile

然后我在页面上移动：

$state.go('home.profile')

我遇到了一个图形错误：

登陆顺利
当我的第一步（使用state.go）来自＆＃39; home.profile＆＃39;到'home.account＆＃39;动画应用于父ui视图（＆＃39; body-block-animation＆＃39; in body）而不是当前的ui-view（＆＃39; home-page-animation＆＃39; in home）。
任何进一步的移动（使用state.go）都会按预期运行，并且只会动画更改的子视图。

我的印象是，通过url的第一次登陆不会像state.go那样锚定父视图。因此，第一个state.go将不会检测到第一个ui-view已经是正确的ui-view并且无论如何都要移动它。

真正发生了什么？我怎么修补它？

angularjs - uirouter嵌套视图动画 - 第一个$ state.go

0 个答案: