admin管理员组文章数量:1418017
I have been playing around with Angular2's animation DSL and I'm a bit confused as to how restrict animations to specific media screen sizes.
For example, lets say I have a logo that on the home page is 400px wide and shrinks to 200px wide when the user visits any other page on a puter monitor.
...
animations: [
trigger('homeLogoState',[
state('inactive', style({
width: '200px',
transition: 'width'
})),
state('active', style({
width: '400px',
transition: 'width'
})),
transition('inactive <=> active', animate('300ms ease-in'))
])
]
...
Yet on a mobile device it needs to remain at 100px for every page.
I understand I could control different animations by controlling what is displayed in the DOM, like below, but that could create an insane amount of code duplication to handle each animation variation for each screen size.
<div class="hidden-under-1920px" @logoAnimationOne="page">
<img src="logo.png">
</div>
<div class="hidden-under-1280px" @logoAnimationTwo="page">
<img src="logo.png">
</div>
What's the proper way to constrain different animations to specific @media selector sizes?
I have been playing around with Angular2's animation DSL and I'm a bit confused as to how restrict animations to specific media screen sizes.
For example, lets say I have a logo that on the home page is 400px wide and shrinks to 200px wide when the user visits any other page on a puter monitor.
...
animations: [
trigger('homeLogoState',[
state('inactive', style({
width: '200px',
transition: 'width'
})),
state('active', style({
width: '400px',
transition: 'width'
})),
transition('inactive <=> active', animate('300ms ease-in'))
])
]
...
Yet on a mobile device it needs to remain at 100px for every page.
I understand I could control different animations by controlling what is displayed in the DOM, like below, but that could create an insane amount of code duplication to handle each animation variation for each screen size.
<div class="hidden-under-1920px" @logoAnimationOne="page">
<img src="logo.png">
</div>
<div class="hidden-under-1280px" @logoAnimationTwo="page">
<img src="logo.png">
</div>
What's the proper way to constrain different animations to specific @media selector sizes?
Share Improve this question asked Aug 5, 2016 at 20:10 BrentShanahanBrentShanahan 6911 gold badge7 silver badges17 bronze badges 2- There is no proper direct way I think.You can control it through javascript only. – micronyks Commented Aug 6, 2016 at 4:19
- I would like to know as well, what is the proper way to tackle different viewports? @micronyks suggested you control it with JS, how? – Demiro-FE-Architect Commented Nov 1, 2016 at 10:29
2 Answers
Reset to default 3I have a solution, just do not know if it's the best. I had a similar problem, but solved.
I have a variable that says if it is open or closed (menuOpen) only varies between true and false, and a variable with three states: 0 or 1 or 2 (onOpen) I have three states, you see it here
import { Component, trigger, state, animate, transition, style, HostListener} from '@angular/core'
....
....
animations: [
trigger('visibilityChanged', [
state('0', style({ width: '50px' })),
state('1', style({ width: '25%' })),
state('2', style({ width: '100%' })),
transition('* => *', animate('.3s'))
])
]....
You can make a single function to resolution, I is that I have not done
export class AppComponent {
wt;
@HostListener('window:resize', ['$event'])
sizeWindow(event) {
this.wt = event.target.innerWidth;
this.sizeMenu(this.wt);
console.log('width =>', this.wt);
}
constructor() {
this.wt = window.innerWidth;
}
sizeMenu(width) {
if (this.menuOpen === true) {
if (width >= 600) {
this.onTestOpen = 1;
} else if (width < 600) {
this.onTestOpen = 2;
}
} else if (this.menuOpen === false) {
this.onTestOpen = 0;
}
}
openMenu() {
let wwt = window.innerWidth;
if (this.menuOpen === false) {
if (wwt >= 600) {
this.onTestOpen = 1;
} else if (wwt < 600) {
this.onTestOpen = 2;
}
this.menuOpen = true;
} else if (this.menuOpen === true) {
this.onTestOpen = 0;
this.menuOpen = false;
}
}
}
in my template I have it
<div class="geral" [@visibilityChanged]="onOpen"></div>
I think in your case will have to deal with more states.
There is a simpler way to achieve this with animation callbacks. In template you do:
...
<element [@triggerName]="state"
(@triggerName.start)="animationStarted($event)"
(@triggerName.done)="animationDone($event)">
...
then in the ponent:
...
animationStarted(event) {
// remove all classes you use. E.g.:
event.element.classList.remove('class1');
event.element.classList.remove('class2');
}
animationDone(event) {
// add class based on the state. E.g:
const classToApply = this.state ? 'class1' : 'class2';
event.element.classList.add(classToApply);
}
...
and then in the css you can do media queries like:
.some-element{
// styles here
// some media query
@media ... {
&.class1 {
// class1 styles here
}
&.class2 {
// class2 styles here
}
...
本文标签： javascriptAngular2 animations media queriesStack Overflow
版权声明：本文标题：javascript - Angular2 animations media queries - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1745283120a2651541.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论