각도(4, 5, 6, 7) - ngIf에서 슬라이드 아웃 애니메이션의 간단한 예

각도(4, 5, 6, 7) - ngIf에서 슬라이드 아웃 애니메이션의 간단한 예

용기 요소를 미끄러져 빼내는 최소 및 각도4의 기본 방법은 무엇인가?

예)

<div ngIf="show">
    <!-- Content -->
</div>

쇼가 true로 바뀔 때 컨텐츠 슬라이딩(jQuery.slideDown()과 마찬가지로 위에서 아래로 슬라이드 삽입).

쇼가 거짓으로 바뀔 때 컨텐츠를 슬라이드 아웃(편리하게 사용 가능)하십시오.

먼저 코드 몇 개, 그 다음엔 설명.이것을 설명하는 공식 문서들이 여기에 있다.

import { trigger, transition, animate, style } from '@angular/animations'

@Component({
  ...
  animations: [
    trigger('slideInOut', [
      transition(':enter', [
        style({transform: 'translateY(-100%)'}),
        animate('200ms ease-in', style({transform: 'translateY(0%)'}))
      ]),
      transition(':leave', [
        animate('200ms ease-in', style({transform: 'translateY(-100%)'}))
      ])
    ])
  ]
})

템플릿에서:

<div *ngIf="visible" [@slideInOut]>This element will slide up and down when the value of 'visible' changes from true to false and vice versa.</div>

나는 그 각진 길이 좀 잡기 까다롭다는 것을 알았지만, 일단 이해하게 되면 꽤 쉽고 강력하다.

애니메이션은 인간 언어로 구성된다.

• 우리는 이 애니메이션을 '슬라이드인아웃'이라고 명명하고 있다.

• 요소가 추가되면(:Enter) 다음을 수행한다.

• ->즉시 요소를 100% 위로(자체에서) 이동시켜 화면을 벗어나게 한다.

• ->>그러고 나면 자연적으로 원소가 0%가 될 때까지 번역Y 값을 애니메이션화한다.

• 요소가 제거되면 translationY 값(현재 0)에서 -100%(오프스크린)까지 애니메이션을 생성한다.

우리가 사용하고 있는 완화 기능은 200밀리초 안에 원하는 대로 바꿀 수 있다.

이것이 도움이 되기를!

나는 매우 비슷한 질문에 대답했고, 여기에 이것을 하는 방법이 있다.

먼저 애니메이션을 정의하고 내보낼 파일을 만드십시오.app.component.tts에서 더 명확하게 하기 위해.

다음 예에서 나는 0px(숨겨 있을 때)에서 500px로 가는 div의 최대 높이를 사용했지만, 당신은 당신이 필요한 것에 따라 그것을 바꿀 것이다.

이 애니메이션은 버튼을 클릭할 때 전환되는 상태를 사용하여 애니메이션을 실행한다.

애니메이션.ts

import { trigger, state, style, transition,
    animate, group, query, stagger, keyframes
} from '@angular/animations';

export const SlideInOutAnimation = [
    trigger('slideInOut', [
        state('in', style({
            'max-height': '500px', 'opacity': '1', 'visibility': 'visible'
        })),
        state('out', style({
            'max-height': '0px', 'opacity': '0', 'visibility': 'hidden'
        })),
        transition('in => out', [group([
            animate('400ms ease-in-out', style({
                'opacity': '0'
            })),
            animate('600ms ease-in-out', style({
                'max-height': '0px'
            })),
            animate('700ms ease-in-out', style({
                'visibility': 'hidden'
            }))
        ]
        )]),
        transition('out => in', [group([
            animate('1ms ease-in-out', style({
                'visibility': 'visible'
            })),
            animate('600ms ease-in-out', style({
                'max-height': '500px'
            })),
            animate('800ms ease-in-out', style({
                'opacity': '1'
            }))
        ]
        )])
    ]),
]

그런 다음 app.component에서 애니메이션을 가져와서 애니메이션 상태를 전환시키는 방법을 만든다.

app.component.ts

import { SlideInOutAnimation } from './animations';

@Component({
  ...
  animations: [SlideInOutAnimation]
})
export class AppComponent  {
  animationState = 'in';

  ...

  toggleShowDiv(divName: string) {
    if (divName === 'divA') {
      console.log(this.animationState);
      this.animationState = this.animationState === 'out' ? 'in' : 'out';
      console.log(this.animationState);
    }
  }
}

그리고 여기 당신의 app.component.html은 어떻게 보일지 입니다.

<div class="wrapper">
  <button (click)="toggleShowDiv('divA')">TOGGLE DIV</button>
  <div [@slideInOut]="animationState" style="height: 100px; background-color: red;">
  THIS DIV IS ANIMATED</div>
  <div class="content">THIS IS CONTENT DIV</div>
</div>

slideInOut은 애니메이션.ts에 정의된 애니메이션 트리거를 가리킨다.

여기 내가 만든 StackBlitz 예제가 있다: https://angular-muvaqu.stackblitz.io/

사이드 노트: 오류가 발생하여 BrowserAnimationsModule을 추가하라는 메시지가 표시되면 app.module.ts로 가져오십시오.

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({
  imports: [ ..., BrowserAnimationsModule ],
  ...
})

실제로 사용할 각도의 최소 양(원래 질문에서 요청한 대로)은 단지 DOM 요소에 클래스를 추가하는 것이다.show변수가 참이며 CSS를 통해 애니메이션/변환을 수행하십시오.

따라서 최소 각도 코드는 다음과 같다.

<div class="box-opener" (click)="show = !show">
    Open/close the box
</div>

<div class="box" [class.opened]="show">
    <!-- Content -->
</div>

이 솔루션을 사용하여 다음과 같은 전환을 위한 CSS 규칙을 만들어야 한다.

.box {
    background-color: #FFCC55;
    max-height: 0px;
    overflow-y: hidden;
    transition: ease-in-out 400ms max-height;
}

.box.opened {
    max-height: 500px;
    transition: ease-in-out 600ms max-height;
}

역방향 브라우저 호환성 문제가 있는 경우 에 벤더 접두사를 추가하십시오.transitions

여기 예제를 참조하십시오.

가장 많이 제시된 답은 다음과 같이 실제 슬라이드 안/밖(또는 하향/상향)을 구현하지 않는 것이다.

1. 그것은 키 속성에 대해 부드러운 전환을 하고 있지 않다.0시 원소는 이미 100% 높이를 가지고 있어 그 아래 원소들에 갑작스런 결함을 발생시킨다.
2. 슬라이딩 아웃/업 시 소자는translateY(-100%)그리고 갑자기 사라져서 그 아래 원소들에 또 다른 결함이 생기게 된다.

다음과 같이 슬라이드를 구현하고 슬라이드 아웃할 수 있다.

my-component.ts

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

@Component({
  ...
  animations: [
    trigger('slideDownUp', [
      transition(':enter', [style({ height: 0 }), animate(500)]),
      transition(':leave', [animate(500, style({ height: 0 }))]),
    ]),
  ],
})

my-component.properties

<div @slideDownUp *ngIf="isShowing" class="box">
  I am the content of the div!
</div>

my-component.scss

.box {
  overflow: hidden;
}

참조URL: https://stackoverflow.com/questions/47248898/angular-4-5-6-7-simple-example-of-slide-in-out-animation-on-ngif