AngularJSのngAnimateでアニメーション中のみ共通のローディングダイアログを表示

こういう感じのをローディングダイアログをtemplateの切り替わり中だけ自動ででるようにする。

rootScopeのincludeContentRequestedとincludeContentLoadedをフックにダイアログの表示/非表示を切り替えようとしたんだけど上手くできなかったので、結局CSSで実装した。

ベースの実装は下記参考にした。
http://blog.asial.co.jp/1236

ローディングダイアログ部分は下記

/* ローディングダイアログ */ 
# loading-dialog {
	display: none;
	width: 100px;
	height: 100px;
	text-align: center;
	position: fixed;
	top: 50%;
	left: 50%;
	margin-top: -50px;
	margin-left: -50px;
	z-index: 100;
	padding: 10px;
	background: rgba(0,0,0,0.7);
	opacity: 0.5;
	color: #111;
	-webkit-border-radius: 7px;
	-moz-border-radius: 7px;
	border-radius: 7px;
	font-size: 11px;
	.spinner {
		margin: 6px auto 0 auto;
		width: 70px;
		text-align: center;
		.bounce1 {
			-webkit-animation-delay: -0.32s;
			animation-delay: -0.32s;
		}
		.bounce2 {
			-webkit-animation-delay: -0.16s;
			animation-delay: -0.16s;
		}
	}
	.spinner > div {
		width: 18px;
		height: 18px;
		margin-top: 20px;
		background-color: rgba(255,255,255,0.8);
		border-radius: 100%;
		display: inline-block;
		-webkit-animation: bouncedelay 1.4s infinite ease-in-out;
		animation: bouncedelay 1.4s infinite ease-in-out;
		/* Prevent first frame from flickering when animation starts */
		-webkit-animation-fill-mode: both;
		animation-fill-mode: both;
	}
	.str{
		padding-top: 10px;
		em{
			color: rgba(255,255,255,0.8);
			font-weight: bold;
			font-size: 14px;
		}
	}
}
@-webkit-keyframes bouncedelay {
    0%, 80%, 100% { -webkit-transform: scale(0.0) }
    40% { -webkit-transform: scale(1.0) }
}
@keyframes bouncedelay {
    0%, 80%, 100% {
        transform: scale(0.0);
        -webkit-transform: scale(0.0);
    } 40% {
        transform: scale(1.0);
        -webkit-transform: scale(1.0);
    }
}

/* アニメーション中だけローディングダイアログ表示 */
.slide-animate.ng-leave + #loading-dialog,
.slide-animate.ng-enter.ng-enter-active + #loading-dialog {
	display: none;
}
.slide-animate.ng-enter + #loading-dialog,
.slide-animate.ng-leave.ng-leave-active + #loading-dialog {
	display: block;
}

<div id="main_content" class="slide-animate-container">
	<div class="slide-animate" ng-include="template.url" >
	</div>
	<div id="loading-dialog" ng-controller="DialogCtrl">
		<div id="spinnerLoader">
			<div class="spinner">
				<div class="bounce1"></div>
				<div class="bounce2"></div>
				<div class="bounce3"></div>
			</div>
		</div>
		<div class="str"><em>Loading</em></div>
	</div>
</div>