CSS slide animation with angular
I am trying to animate a div using ng-show with CSS3 transitions. There are 2 divs, one in the foreground and one hidden behind it. The hidden div should slide when the user clicks over the front div. It should also remain visible if the user's cursor moves over the slider. If the custom cursor leaves the div div or foreground div, it should move back. However, it does not work correctly. Here's the plunker: http://plnkr.co/edit/C1RaDTOXwpEMECGMkt19?p=preview
Is the css correct?
div#cover {
background-color: lightblue;
width: 90px;
height: 30px;
position:absolute;
bottom: 0px;
z-index:10;
}
.slide {
background-color: white;
width: 90px;
height: 30px;
position:absolute;
bottom: 0px;
z-index:5;
}
.slide.ng-hide-add, .slide.ng-hide-remove {
transition: bottom 1s ease;
}
.slide.ng-hide-remove-active {
bottom: 30px
}
.slide.ng-hide-add-active {
bottom: 0px
}
Any ideas?
source to share
You only need two states:
- Shown
- Hidden
Let the base class slide
define the state to show (30px from the bottom):
.slide {
background-color: white;
width: 90px;
height: 30px;
position: absolute;
bottom: 30px;
z-index: 5;
transition: 1s ease bottom !important;
display: block !important;
}
When the expression used in the directive ng-show
evaluates to false, the hidden state will be activated and the class ng-hide
will be added to the Angular element.
Use this class to decorate base class and define hidden state (0px from bottom):
.slide.ng-hide {
bottom: 0;
}
This means that the following classes will be involved in two states:
- Shown:
slide
- Is hidden:
slide ng-hide
As you can see the class is slide
always present, so it puts transition
.
You must use !important
in transition
, otherwise if you move the cursor back and forth over an Angular element, it will briefly redefine it with transition: none
, which will break the transition and the element will be anchored to the final position.
You should also use display: block !important
in class slide
to override the default behavior ng-hide
which is display: none
.
Demo: http://plnkr.co/edit/WN8v2riSYhhMyOgbZiWO?p=preview
Note. Personally, I would not recommend using ng-mouseenter
or ng-mouseleave
for this. Each time they run the entire digest cycle, all observers will run multiple times. An alternative would be to create a directive that uses event listeners to manually add / remove classes.
source to share