A191919 A191919 - 6 months ago 47
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%;
}
Comments