Question

我有以下CSS标记，可以在AngularJS中对视图更改进行平滑的淡入过渡：

[ui-view].ng-enter {
    transition: .7s;
    opacity: 0;
}

[ui-view].ng-enter-active {
    opacity: 1;
}

使用我已经构建的导航菜单时工作正常，但是当我直接登陆视图（即：/#/products/1）时，没有淡入。是否还有其他需要添加的事件代码到？

感谢。

Answer 1

[ui-view].ng-enter {
     opacity:0.7
    -webkit-transition:opacity 2s ; 
    -moz-transition:opacity 2s ; 
    -o-transition:opacity 2s ; 
    -ms-transition:opacity 2s ; 
    transition:opacity 2s;
}

[ui-view].ng-enter-active { opacity:1;}

Answer 2

您可以尝试以下内容：

/* Have to set height explicity on ui-view 
to prevent collapsing during animation*/

.animated-view.well{
 height: 65px; 
}

.ui-view-container {
  position: relative;
}


.ng-enter, .ng-leave {
  position: absolute;
  left: 0;
  right: 0;
  -webkit-transition:all .5s ease-in-out;
    -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;
}

我已经在 plunkr 中设置了一个简单的演示应用，并带有工作动画。

ui-view在转型中淡出

2 个答案: