這篇文章為練習的文章，鞏固自己的學的成果，現在我們試試看做angularjs中的animations動畫三，看看效果。下面就讓我們一起來看下去吧
文章基於angular的練手項目。文章目錄
上一篇文章《Angular練習之animations動畫二》中練習了入場與出場動畫、 Keyframes實作串連動畫、Group實作並行動畫。今天練習動畫回調函數、query選擇器。
（想看更多就到PHP中文網AngularJS開發手冊中學習）
回呼叫法也是很簡單，如下：
<p>
</p>
Callback(f:boolean){
if(f){
console.log("动画开始");
}else {
console.log("动画结束");
}
}用法和css選擇器大致相同,透過query便可以實現不同元素實現不同的動畫效果。
/*
query选择器演示
用法和css选择器大致相同
*/
export const QueryAnimate = trigger('QueryAnimate',[
transition('off=>on', [
// 先全部隐藏
query('p', style({ opacity: 0 })),
// 再执行动画
query('.box-top', animate('500ms',keyframes([
style({opacity: 0, transform: 'translateY(-400%)', offset: 0}),
style({opacity: 1, transform: 'translateY(0)', offset: 1.0})
]) )),
query('.box-center', animate('500ms',keyframes([
style({opacity: 0, transform: 'translateX(-400%)', offset: 0}),
style({opacity: 1, transform: 'translateX(0)', offset: 1.0})
]) )),
query('.box-foot', animate('500ms',keyframes([
style({opacity: 0, transform: 'translateY(400%)', offset: 0}),
style({opacity: 1, transform: 'translateY(0)', offset: 1.0})
]) )),
query('h2', animate('500ms',keyframes([
style({transform:'scale(0.5)'}),
style({transform: 'scale(1)'})
]) )),
]),
transition('on=>off', [
query('.box-top', animate('500ms',keyframes([
style({opacity: 1, transform: 'translateY(0)'}),
style({opacity: 0, transform: 'translateY(-400%)'})
]) )),
query('.box-center', animate('500ms',keyframes([
style({opacity: 1, transform: 'translateX(0)'}),
style({opacity: 0, transform: 'translateX(-400%)'})
]) )),
query('.box-foot', animate('500ms',keyframes([
style({opacity: 1, transform: 'translateY(0)'}),
style({opacity: 0, transform: 'translateY(400%)'})
]) )),
query('h2', animate('500ms',keyframes([
style({transform:'scale(1)'}),
style({transform: 'scale(0.5)'})
]) )),
])
]);
#原始碼放在github開源社群上面，隨時會更新。所以你下載最新版本的時候會與該文章描述的略有差異。 github網址：https://github.com/yiershan/A...
好了，這篇文章到這就結束了（想看更多就到PHP中文網AngularJS使用手冊中學習），有問題的可以在下方留言提問。
#以上是Angular如何製作animations動畫三？這裡有angularjs製作animations動畫的詳情的詳細內容。更多資訊請關注PHP中文網其他相關文章！
