AngularJS Animations

· 8년 전 · 1505
AngularJS Animations

AngularJS는 CSS의 도움으로 애니메이션 전환을 제공합니다.

애니메이션이란 무엇입니까?
애니메이션은 HTML 요소의 변형이 당신에게 환상의 환상을 부여 할 때입니다.

예:
확인란을 선택하여 DIV를 숨 깁니다.

<body ng-app="ngAnimate">

Hide the DIV: <input type="checkbox" ng-model="myCheck">

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

</body>


[전체소스]
<!DOCTYPE html>
<html>
<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="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-animate.js"></script>

<body ng-app="ngAnimate">

<h1>Hide the DIV: <input type="checkbox" ng-model="myCheck"></h1>

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

</body>
</html>
|
댓글을 작성하시려면 로그인이 필요합니다.

퍼블리싱강좌

+
분류 제목 글쓴이 날짜 조회
부트스트랩
[부트스트랩]
8년 전 조회 1,525
부트스트랩
[부트스트랩]
8년 전 조회 1,392
부트스트랩 8년 전 조회 1,736
부트스트랩 8년 전 조회 1,733
부트스트랩
[부트스트랩]
8년 전 조회 1,972
부트스트랩 8년 전 조회 2,894
AngularJS
[AngularJS]
8년 전 조회 1,635
AngularJS
[AngularJS]
8년 전 조회 1,297
AngularJS
[AngularJS]
8년 전 조회 1,156
AngularJS 8년 전 조회 1,546
AngularJS 8년 전 조회 1,367
AngularJS 8년 전 조회 1,682
AngularJS 8년 전 조회 1,616
AngularJS 8년 전 조회 1,584
AngularJS 8년 전 조회 1,506
AngularJS 8년 전 조회 1,395
AngularJS 8년 전 조회 1,562
AngularJS 8년 전 조회 1,210
AngularJS 8년 전 조회 1,431
AngularJS 8년 전 조회 1,434
AngularJS 8년 전 조회 1,809
AngularJS
[AngularJS]
8년 전 조회 1,529
AngularJS
[AngularJS]
8년 전 조회 1,749
AngularJS 8년 전 조회 1,732
AngularJS
[AngularJS]
8년 전 조회 1,815
AngularJS 8년 전 조회 1,555
AngularJS
[AngularJS]
8년 전 조회 1,536
AngularJS 8년 전 조회 1,551
AngularJS
[AngularJS]
8년 전 조회 1,598
AngularJS
[AngularJS]
8년 전 조회 1,626