angular2中的多個動畫觸發器組件

我想在一個組件中定義多個動畫觸發器。這可能嗎？angular2中的多個動畫觸發器組件

例如一個用於進入現場，另一個用於懸停。或者我是否需要爲這種情況定義兩個組件（父子）？

item.compoennt.ts

// removed the import and class part for better readability 

@Component({ 
    selector: 'item', 
    templateUrl: './item.template.html', 
    styleUrls: ['./item.style.scss'], 
    animations: [ 
    // page load animation 
    trigger('slideIn', [ 
     state('in', style({ 
      opacity: 1, 
      transform: 'translateY(0)' 
     })), 
     transition('void => *', [ 
      style({ 
       transform: 'translateY(100%)', 
       opacity: 0 
      }), 
      animate('0.5s 100ms ease-in') 
     ]) 
    ]), 


    // <--- this fails 
    // hover animation 
    trigger('fadeIn', [ 
     state('over', style({ 
      opacity: 1 
     })), 
     transition('void => *', [ 
      style({ 
       opacity: 0 
      }), 
      animate('0.5s 100ms ease-in') 
    ]) 
    ], 
})

item.template.html

<div class="item" [@slideIn]="enterState"> 

    <div class="info"> 
     SOME INFO 
    </div> 
    <div class="info-on-hover" [@fadeIn]="hoverState"> 
     SOME INFO 
    </div> 
</div>

哦，有人要創建標籤「angular2動畫」

問候

來源

2016-08-23 kkern

plunker如果你能提供？ – micronyks

這裏是我建立http://plnkr.co/edit/8beFC9Y5C2jpD6cV52I0（試過它...） – kkern

我想在一個組件中定義多個動畫觸發器。這可能嗎？

是的，你可以有你需要的觸發器。

您也可以在一個觸發器中擁有多個狀態，而不僅僅是兩個狀態。所以你可以例如在狀態之間有一個'進入'狀態和'懸停'狀態以及不同的轉換。

例如：

state('in', style({opacity: 1, 
      transform: 'translateY(0)' 
     })), 
state('hover', style({background: 'red'}), 
transition('* <=> hover', animate('200ms ease-in'))

來源

2016-08-23 12:54:17

嗨，是的，但如果我定義兩個觸發器它不會被編譯。還是僅僅是我？非易失性存儲器， – kkern

。我忘記了一些結束標籤，所以我認爲多個觸發器是不可能的。非常感謝您的幫助！ – kkern

很高興你得到它的工作。 –

angular2中的多個動畫觸發器組件

回答

相關問題