Angular 2：为多个元素重复使用相同的动画

有没有一种方法可以为不同的DOM元素使用相同的css动画？我创建了两次相同的动画，并且正在寻找一种方法来只写一次，并记下我想要淡入淡出的DOM元素。现在，我意识到View Child和ElementRef，但我对实现有点不清楚。另外，我正在尝试寻找一种避免ElementRef由于XSS安全问题的实现。 https://angular.io/docs/ts/latest/api/core/index/ElementRef-class.html Angular 2：为多个元素重复使用相同的动画

这里是我的HTML

<div> 
    <md-checkbox (change)="toggleFadeOne()">Show</md-checkbox> 
    <div fxLayout="row" [@fadeOne]="fadeOne" class="oneToggle"> 
     <p> 

     </p> 
    </div> 
</div> 

<div> 
    <md-checkbox (change)="toggleFadeTwo()">Show</md-checkbox> 
    <div fxLayout="row" [@fadeTwo]="fadeTwo" class="twoToggle"> 
    <p> 

    </p> 
</div>

这里是我的CSS

.oneToggle, .twoToggle {//initial style for el, instead of void 
    opacity: 0; 
    visibility: hidden; 
}

这里是我的打字稿

@Component({ 
    selector : 'c-select-composite-config-dialog', 
    templateUrl: './page.html', 
    styleUrls: ['./style.css'], 
    animations: [ 
    trigger('fadeOne', [ 
    state('in', style({ 
     'opacity' : '1', 'visibility' : 'visible' 
    })), 
    state('out', style({ 
     'opacity' : '0', 'visibility' : 'hidden' 
    })), 
    transition('* => *', animate(500)) 
    ]), 
    trigger('fadeTwo', [ 
    state('in', style({ 
     'opacity' : '1', 'visibility' : 'visible' 
    })), 
    state('out', style({ 
     'opacity' : '0', 'visibility' : 'hidden' 
    })), 
    transition('* => *', animate(500)) 
    ]) 
] 
}) 
export class MyComponent { 



    private fadeOne : string; 
    private fadeTwo : string; 

    private toggleFadeOne() { 
    if(this.fadeOne === 'out' || this.fadeOne === undefined) { 
    this.fadeOne = 'in'; 
    } else { 
    this.fadeOne = 'out' 
    } 
} 

private toggleFadeTwo() { 
    if(this.fadeTwo === 'out' || this.fadeTwo === undefined) { 
    this.fadeTwo = 'in'; 
    } else { 
    this.fadeTwo = 'out' 
    } 
} 

... 
}

来源

2017-02-23 John Stafford

我敢肯定，你可以在其他地方定义anmiation，然后导入它并将其分配给您的动画属性。

像这样：

**import the animation classes** 

export static class Animations { 
    public sharedAnimation = trigger('fadeOne', [ 
    state('in', style({ 
     'opacity' : '1', 'visibility' : 'visible' 
    })), 
    state('out', style({ 
     'opacity' : '0', 'visibility' : 'hidden' 
    })), 
    transition('* => *', animate(500)) 
    ]), 
    trigger('fadeTwo', [ 
    state('in', style({ 
     'opacity' : '1', 'visibility' : 'visible' 
    })), 
    state('out', style({ 
     'opacity' : '0', 'visibility' : 'hidden' 
    })), 
    transition('* => *', animate(500)) 
    ]) 
] 
}

那么我认为你可以这样做：

animations: Animations.sharedAnimation

来源

2017-02-23 20:18:46 chrispy

感谢您的答复@chrispy。是的，我很熟悉在外部文件中定义动画，但是又一次，相同的动画，写两次？必须有某种方法将一个动画定位到不同的DOM元素。 –

我刚刚发现了这个。 http://stackoverflow.com/questions/42068914/angular-2-animate-a-speciffic-targeted-element;这可能会做到这一点。 –

使用ngClass处理解决方案并将动画保留为外部css中的关键帧。动画状态可以保持大致相同，就像我在这里做的一样，用一个与复选框相关的函数来切换状态。 –

Angular 2：为多个元素重复使用相同的动画

回答

相关问题