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)'
})
]) )),
])
]);