angular.js $animateCss

<a href="https://docs.angularjs.org/api/ngAnimate/service/$animateCss">$animateCss</a>を使えばkeyfames構文のような形式でアニメーション定義出来るっぽいのでやってみた

要件としてはナビゲーションバーにリンクを設置、そこにマウスオーバーする事で出てくるUIを実現する。でその出てくる時にアニメーションして表示させる

コードは全部jsdo.itにあげてあるのでここで書くのは省略

要はリンクにng-mouseoverを設定してアニメーションでの表示を行って境界線となる所を外れるとng-mouseleaveが発生するようになって消えていくようなアニメーションを実現するような感じ