Angular ng-view幻灯片动画

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

但不是好的动画我getted一些奇怪的事情。如何解决这个问题？我想像例子那样获得动画。我做错了什么？

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%; 
}