Angular 3로 애니메이션을 만드는 방법은 무엇입니까? Anglejs를 사용하여 애니메이션을 만드는 방법에 대한 자세한 내용은 다음과 같습니다.

이 글은 학습 결과를 통합하기 위한 연습 글입니다. 이제 angularjs에서 애니메이션 3을 시도하여 효과를 확인해 보겠습니다. 함께 살펴보아요

서문입니다

글은 Angle 실습 프로젝트를 바탕으로 작성되었습니다. Article Directory
이전 글 "Angular Practice Animations 2"에서는 진입 및 퇴출 애니메이션과 직렬 애니메이션을 구현하기 위한 Keyframes, 병렬 애니메이션을 구현하기 위한 Group을 연습했습니다. 오늘은 애니메이션 콜백 함수와 쿼리 선택기를 연습합니다.

연습 시작하기

콜백 기능

(자세한 내용을 보고 싶으면 PHP 중국어 홈페이지 # 🎜🎜# AngularJS 개발 매뉴얼Learning)

콜백 방법도 다음과 같이 매우 간단합니다.

  <p>
  </p>


  Callback(f:boolean){
    if(f){
      console.log("动画开始");
    }else {
      console.log("动画结束");
    }
  }

#🎜 🎜##🎜🎜 #query

사용법은 CSS 선택기와 거의 동일하며, 쿼리를 통해 요소마다 다른 애니메이션 효과를 얻을 수 있습니다.

/*
query选择器演示
用法和css选择器大致相同
 */
export const QueryAnimate = trigger('QueryAnimate',[
    transition('off=>on', [
      // 先全部隐藏
      query('p', style({ opacity: 0 })),
      // 再执行动画
      query('.box-top', animate('500ms',keyframes([
        style({opacity: 0, transform: 'translateY(-400%)', offset: 0}),
        style({opacity: 1, transform: 'translateY(0)',     offset: 1.0})
      ]) )),
      query('.box-center', animate('500ms',keyframes([
        style({opacity: 0, transform: 'translateX(-400%)', offset: 0}),
        style({opacity: 1, transform: 'translateX(0)',     offset: 1.0})
      ]) )),
      query('.box-foot', animate('500ms',keyframes([
        style({opacity: 0, transform: 'translateY(400%)', offset: 0}),
        style({opacity: 1, transform: 'translateY(0)',     offset: 1.0})
      ]) )),
      query('h2', animate('500ms',keyframes([
        style({transform:'scale(0.5)'}),
        style({transform: 'scale(1)'})
      ]) )),
    ]),
    transition('on=>off', [
      query('.box-top', animate('500ms',keyframes([
        style({opacity: 1, transform: 'translateY(0)'}),
        style({opacity: 0, transform: 'translateY(-400%)'})
      ]) )),
      query('.box-center', animate('500ms',keyframes([
        style({opacity: 1, transform: 'translateX(0)'}),
        style({opacity: 0, transform: 'translateX(-400%)'})
      ]) )),
      query('.box-foot', animate('500ms',keyframes([
        style({opacity: 1, transform: 'translateY(0)'}),
        style({opacity: 0, transform: 'translateY(400%)'})
      ]) )),
      query('h2', animate('500ms',keyframes([
        style({transform:'scale(1)'}),
        style({transform: 'scale(0.5)'})
      ]) )),
    ])
  ]);

소스 코드

소스 코드는 github 오픈 소스 커뮤니티에 있습니다. 언제든지 업데이트될 예정입니다. 따라서 최신 버전을 다운로드하면 기사에서 설명한 내용과 약간 다를 수 있습니다. Github 주소: https://github.com/yiershan/A...

좋아요, 이 글은 여기서 끝납니다. (자세한 내용을 보려면 PHP 중국어 웹사이트를 방문하세요

AngularJS 사용자 매뉴얼

) 궁금한 점이 있으면 아래에 메시지를 남겨주세요.

위 내용은 Angular 3로 애니메이션을 만드는 방법은 무엇입니까? Anglejs를 사용하여 애니메이션을 만드는 방법에 대한 자세한 내용은 다음과 같습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!