角度视图幻灯片动画

Question

我正在尝试从Animation ng view example实现ng-view的幻灯片动画。

的CSS：

.header{
    height:80px;
    width:100%;
}
.content {
    height: 380px;
    width: 100%;
    display:flex;
}
.left{
    flex:0 0 300px;
}
.right {
    flex: 1;
    border: solid;
}
.slide {
    position: relative;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}
.slide.ng-enter,
.slide.ng-leave {
    transition: all 1s ease;
}

.slide.ng-enter {
    left: 100%;
}

.slide.ng-enter-active {
    left: 0;
}

.slide.ng-leave {
    left: 0;
}

.slide.ng-leave-active {
    left: -100%;
}

我得到了什么my animation

但不是好动画，我得到了一些奇怪的东西。如何解决这个问题？我希望像示例一样获得动画。我错了什么？

Answer 1

这是你的html容器样式

.left{
    flex:0 0 300px;
  background-color: #fff;
  z-index: 10;
}
.right {
  position: relative;
    flex: 1;
    border: solid;
  z-index: 1;
}
.slide {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}