making popover animation work - css

Question

Upon click of button, I display a popover.
however if you notice the pointer of the popover slides from a completely different direction.
Not quiet able to fix this. Kindly advise.
.popover {
position: absolute;
top: 50px;
left: -175px;
width: 400px;
height: 200px;
background-color: rgb(233, 212, 222);
border-radius: 4px;
box-shadow: 3px -2px 4px #AAA;
transition: all linear 0.5s;
}
.popover-arrow {
position: absolute;
top: -16px;
left: 180px;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-bottom: 20px solid rgb(233, 212, 222);
width: 0;
height: 0;
transition: all linear 0.01s;
}
plnkr: http://plnkr.co/edit/SiwYgmkZjh2NuszI0q2E
Expected behavior would be for the pointer of the popover to also animate the same was the popover does (from top to bottom)

Answer 1

THis is due to the ng-hide class that is added to your .popover class. It has set position before animation.
top: -18px;
left: 20px;
Override it with this:
.ng-hide {
top: -16px;
left: -175px;
}

Answer 2

Thanks to #Valius79 .. i got something working
.popover {
position: absolute;
top: 50px;
left: -175px;
width: 400px;
height: 200px;
background-color: rgb(233, 212, 222);
border-radius: 4px;
box-shadow: 3px -2px 4px #AAA;
transition: all linear 0.5s;
}
.popover.ng-hide {
height: 0;
width: 0;
background-color: transparent;
top:-18px;
left: 20px;
}
.popover-arrow {
position: absolute;
top: 35px;
left: 5px;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-bottom: 20px solid rgb(233, 212, 222);
width: 0;
height: 0;
transition: all linear 0.5s;
}
.popover-arrow.ng-hide {
top: -36px;
left: 5px;
}
http://plnkr.co/edit/SiwYgmkZjh2NuszI0q2E?p=preview