AngularJS 애니메이션


AngularJS는 CSS와 함께 사용할 수 있는 애니메이션 효과를 제공합니다.

AngularJS에서 애니메이션을 사용하려면 angle-animate.min.js 라이브러리를 도입해야 합니다. 

<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular-animate.min.js"></script>

또한 ngAnimate 애플리케이션에서 모델을 사용해야 합니다. 

<body ng-app="ngAnimate">

애니메이션이란 무엇인가요?

애니메이션은 HTML 요소를 변경하여 생성되는 동적 변경 효과입니다.

Instance

DIV를 숨기려면 확인란을 선택하세요.

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
div {
  transition: all linear 0.5s;
  background-color: lightblue;
  height: 100px;
  width: 100%;
  position: relative;
  top: 0;
  left: 0;
}

.ng-hide {
  height: 0;
  width: 0;
  background-color: transparent;
  top:-200px;
  left: 200px;
}

</style>
<script src="//cdn.bootcss.com/angular.js/1.4.6/angular.min.js"></script>
<script src="//cdn.bootcss.com/angular.js/1.4.6/angular-animate.min.js"></script>
</head>
<body ng-app="ngAnimate">

<h1>隐藏 DIV: <input type="checkbox" ng-model="myCheck"></h1>

<div ng-hide="myCheck"></div>

</body>
</html>

Run Instance»

온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요

Note 적용 애니메이션이 너무 많으면 안 되지만, 애니메이션을 적절하게 사용하면 페이지의 풍부함을 높이고 사용자가 이해하기 쉽게 만들 수 있습니다.

애플리케이션에서 애플리케이션 이름을 설정한 경우 ngAnimate를 모델에 직접 추가할 수 있습니다.

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
div {
  transition: all linear 0.5s;
  background-color: lightblue;
  height: 100px;
  width: 100%;
  position: relative;
  top: 0;
  left: 0;
}

.ng-hide {
  height: 0;
  width: 0;
  background-color: transparent;
  top:-200px;
  left: 200px;
}

</style>
<script src="//cdn.bootcss.com/angular.js/1.4.6/angular.min.js"></script>
<script src="//cdn.bootcss.com/angular.js/1.4.6/angular-animate.min.js"></script>
</head>
<body ng-app="myApp">

<h1>隐藏 DIV: <input type="checkbox" ng-model="myCheck"></h1>

<div ng-hide="myCheck"></div>

<script>
var app = angular.module('myApp', ['ngAnimate']);
</script>

</body>
</html>

Run Instance»

온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요

ngAnimate가 완료되었습니다 무엇을?

ngAnimate 모델은 클래스를 추가하거나 제거할 수 있습니다.

ngAnimate 모델은 HTML 요소에 애니메이션을 적용할 수 없지만 ngAnimate는 HTML 요소 숨기기 및 표시와 같은 이벤트를 모니터링합니다. 이벤트가 발생하면 ngAnimate는 미리 정의된 클래스를 사용하여 HTML 요소에 애니메이션을 적용합니다.

클래스 추가/제거를 위한 AngularJS 지침:

  • ng-showng-show

  • ng-hide

  • ng-class

  • ng-view

  • ng-include

  • ng-repeat

  • ng-if

  • ng-switch

ng-show 和 ng-hide 指令用于添加或移除 ng-hide class 的值。

其他指令会在进入 DOM 会添加 ng-enter 类，移除 DOM 会添加 ng-leave 属性。

当 HTML 元素位置改变时，ng-repeat 指令同样可以添加 ng-move 类 。

此外， 在动画完成后，HTML 元素的类集合将被移除。例如：ng-hide 指令会添加一下类：

  • ng-animate

  • ng-hide-animate

  • ng-hide-add (如果元素将被隐藏)

  • ng-hide-remove (如果元素将显示)

  • ng-hide-add-active (如果元素将隐藏)

  • ng-hide-remove-active (如果元素将显示)

使用 CSS 动画

我们可以使用 CSS transition(过渡) 或 CSS 动画让 HTML 元素产生动画效果，该部分内容你可以参阅我们的CSS 过渡教程，CSS 动画教程。

CSS 过渡

CSS 过渡可以让我们平滑的将一个 CSS 属性值修改为另外一个：

实例

在 DIV 元素设置了 .ng-hide 类时，过渡需要花费 0.5 秒，高度从 100px 变为 0:

实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
div {
  transition: all linear 0.5s;
  background-color: lightblue;
  height: 100px;
}

.ng-hide {
  height: 0;
}
</style>
<script src="//cdn.bootcss.com/angular.js/1.4.6/angular.min.js"></script>
<script src="//cdn.bootcss.com/angular.js/1.4.6/angular-animate.min.js"></script>
</head>
<body ng-app="myApp">

<h1>隐藏 DIV: <input type="checkbox" ng-model="myCheck"></h1>

<div ng-hide="myCheck"></div>

<script>
var app = angular.module('myApp', ['ngAnimate']);
</script>

</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

CSS 动画

CSS 动画允许你平滑的修改 CSS 属性值:

实例

在 DIV 元素设置了 .ng-hide 类时,  myChange

ng-hide

< code >ng-class
🎜🎜ng-view🎜🎜🎜ng-include🎜🎜🎜 < code>ng-반복🎜🎜🎜ng-if🎜🎜🎜ng-switch🎜< / ul>🎜ng-show 및 ng-hide 지시문은 ng-hide 클래스의 값을 추가하거나 제거하는 데 사용됩니다. 🎜🎜다른 지침에서는 DOM에 들어갈 때 ng-enter 클래스를 추가하고 DOM을 제거할 때 ng-leave 속성이 추가됩니다. 🎜🎜HTML 요소의 위치가 변경되면 ng-repeat 지시문에 ng-move 클래스를 추가할 수도 있습니다. 🎜🎜또한 애니메이션이 완료된 후 HTML 요소의 클래스 컬렉션이 제거됩니다. 예: ng-hide 지시문은 다음 클래스를 추가합니다: 🎜🎜🎜🎜ng-animate🎜🎜🎜ng-hide-animate 🎜🎜🎜ng-hide-add(요소가 숨겨지는 경우)🎜🎜🎜ng-hide-remove (요소가 표시되는 경우)🎜🎜🎜ng-hide-add-active (요소가 숨겨지는 경우)🎜🎜🎜ng-hide- 제거-활성 (요소가 표시될 경우)🎜🎜🎜CSS 애니메이션 사용🎜🎜이 부분에서는 CSS 전환(전환) 또는 CSS 애니메이션을 사용하여 HTML 요소에 애니메이션을 적용할 수 있습니다. , CSS 전환 튜토리얼, CSS 애니메이션 튜토리얼을 참조할 수 있습니다. 🎜🎜🎜CSS 전환🎜🎜CSS 전환을 사용하면 하나의 CSS 속성 값을 다른 CSS 속성 값으로 원활하게 변경할 수 있습니다. 🎜🎜

Instance

🎜DIV 요소 > 클래스에 .ng-hide<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> @keyframes myChange {   from {       height: 100px;   } to {       height: 0;   } } div {   height: 100px;   background-color: lightblue; } div.ng-hide {   animation: 0.5s myChange; } </style> <script src="//cdn.bootcss.com/angular.js/1.4.6/angular.min.js"></script> <script src="//cdn.bootcss.com/angular.js/1.4.6/angular-animate.min.js"></script> </head> <body ng-app="ngAnimate"> 隐藏 DIV: <input type="checkbox" ng-model="myCheck"> <div ng-hide="myCheck"> </div> </body> </html>🎜🎜🎜Run Instance»🎜🎜온라인 예제를 보려면 "Run Instance" 버튼을 클릭하세요🎜🎜🎜🎜🎜CSS Animation🎜🎜 CSS 애니메이션을 사용하면 CSS 속성 값을 원활하게 수정할 수 있습니다: 🎜🎜

Instance

🎜 DIV 요소가 .ng-hide 클래스로 설정되면 myChange 애니메이션이 실행되면 높이가 100px에서 0:🎜🎜🎜Example🎜🎜rrreee🎜으로 부드럽게 변경됩니다.
인스턴스 실행 »

온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요