角2 ngIf和CSS过渡/动画 [英] angular 2 ngIf and CSS transition/animation

问题描述

我想要一个div使用css从右边滑入角度2。

 < div class = [ngClass] ={'transition'：show}* ngIf =show> 
< p>注释< / p> 
< / div> 
< button class =btn btn-default（click）=toggle（show）>切换< / button> 
  

如果我只使用[ngClass]切换类并使用不透明度，
但是li不希望该元素从头开始渲染，所以我首先使用ngIf隐藏它，但是转换不会工作。

  .transition {
 -webkit-transition：opacity 1000ms ease-in-out，margin-left 500ms ease-in-out; 
 -moz-transition：opacity 1000ms ease-in-out，margin-left 500ms ease-in-out; 
 -ms-transition：opacity 1000ms ease-in-out，margin-left 500ms ease-in-out; 
 -o-transition：opacity 1000ms ease-in-out，margin-left 500ms ease-in-out; 
 transition：opacity 1000ms ease-in-out，margin-left 500ms ease-in-out; 
 margin-left：1500px; 
 width：200px; 
 opacity：0; 
} 
 
 .transition {
 opacity：100; 
 margin-left：0; 
} 
  

解决方案

更新2.1.0

Plunker

有关详情，请参阅 angular.io的动画

  import {component，trigger，transition，style，animate} 
 
 @Component（{
 selector：'my-app'，
 animations：[
 trigger（
'enterAnimation'，[
 transition（'：enter'，[
 style（{transform：'translateX（100％）'，opacity：0}），
 animate（'500ms'，style（{transform：'translateX ）'，opacity：1}））
]），
 transition（'：leave'，[
 style（{transform：'translateX（0）'，opacity：1} 
 animate（'500ms'，style（{transform：'translateX（100％）'，opacity：0}））
]）
] 
）
] ，
 template：`
< button（click）=show =！show> toggle show（{{show}}）< / button> 
 
 ; div * ngIf =show[@enterAnimation] =show> xxx< / div> 
`
}）
 export class App {
 show：boolean =假; 
} 
  

原始当表达式变为 false 时，

* ngIf 会从DOM中删除元素。

使用隐藏：

 < div class =note[ngClass] ={'transition'：show}[ ] =！show> 
  

I want a div to slide in from the right in angular 2 using css.

  <div class="note" [ngClass]="{'transition':show}" *ngIf="show">
    <p> Notes</p>
  </div>
  <button class="btn btn-default" (click)="toggle(show)">Toggle</button>

I works fine if i only use [ngClass] to toggle class and utilise opacity. But li don't want that element to be rendered from the beginning so I "hide" it with ngIf first, but then the transition wont't work.

.transition{
  -webkit-transition: opacity 1000ms ease-in-out,margin-left 500ms ease-in-out;
  -moz-transition: opacity 1000ms ease-in-out,margin-left 500ms ease-in-out;
  -ms-transition: opacity 1000ms ease-in-out,margin-left 500ms ease-in-out ;
  -o-transition: opacity 1000ms ease-in-out,margin-left 500ms ease-in-out;
  transition: opacity 1000ms ease-in-out,margin-left 500ms ease-in-out;
  margin-left: 1500px;
  width: 200px;
  opacity: 0;
}

.transition{
  opacity: 100;
  margin-left: 0;
}

解决方案

update 2.1.0

Plunker

For more details see Animations at angular.io

import { Component, trigger, transition, style, animate } from '@angular/core';    

@Component({
  selector: 'my-app',
  animations: [
    trigger(
      'enterAnimation', [
        transition(':enter', [
          style({transform: 'translateX(100%)', opacity: 0}),
          animate('500ms', style({transform: 'translateX(0)', opacity: 1}))
        ]),
        transition(':leave', [
          style({transform: 'translateX(0)', opacity: 1}),
          animate('500ms', style({transform: 'translateX(100%)', opacity: 0}))
        ])
      ]
    )
  ],
  template: `
    <button (click)="show = !show">toggle show ({{show}})</button>

    <div *ngIf="show" [@enterAnimation]="show">xxx</div>
  `
})
export class App {
  show:boolean = false;
}

original

*ngIf removes the element from the DOM when the expression becomes false. You can't have a transition on a non-existing element.

Use instead hidden:

<div class="note" [ngClass]="{'transition':show}" [hidden]="!show">

这篇关于角2 ngIf和CSS过渡/动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！