AngularJS Question
Angular ng-view slide animation
I am trying to implement slide animation of ng-view from 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%;
}
what i get my animation
But instead of good animation i getted something strange. How to fix this? I want to get animation like on example. What i am making wrong?
Answer
it's your styling for the html containers
.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%;
}
Source (Stackoverflow)