角2：複数の要素に同じアニメーションを再利用する

Question

別のDOM要素に同じCSSアニメーションを使用する方法はありますか？私は同じアニメーションを2回作成しました。一度書き込んで、どのDOM要素をフェードインとフェードアウトするかをメモする方法を探していました。今、私はView ChildとElementRefを認識していますが、実装については少し不明です。また、XSSのセキュリティ上の理由からElementRefを回避する実装を探しています。 https://angular.io/docs/ts/latest/api/core/index/ElementRef-class.html

はここで、ここに私の活字体

私はあなたが他の場所でanmiationを定義することができますかなり確信している

@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' 
    } 
} 

... 
} 

Answer 1

であるここに私の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; 
} 

ですそれをインポートしてアニメーションプロパティに割り当てます。このよう

：

**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)) 
    ]) 
] 
} 

は、それから私はあなたができると思う：あなたの応答@chrispyため

animations: Animations.sharedAnimation