Angular ng-view slide animation

Question

Я пытаюсь реализовать слайд-анимацию ng-view от Animation ng view example.

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