지역 사회 배우다 도구 라이브러리 여가
찾다
한국어
집 > 웹 프론트엔드 > JS 튜토리얼 > 본문

CSS3_AngularJS를 사용하여 Angular에서 애니메이션 구현

WBOY
풀어 주다： 2016-05-16 15:19:48
원래의
2524명이 탐색했습니다.

더 이상 말도 안 되는 소리는 하지 마세요. 그냥 예시 코드를 게시하겠습니다.

예제를 직접 살펴보세요. 

<!DOCTYPE HTML>
<html ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>ngAnimate插件1</title> <script type="text/javascript" src="https://code.angularjs.org/1.3.8/angular.min.js"></script>
<script type="text/javascript" src="https://code.angularjs.org/1.3.8/angular-animate.min.js"></script> <style type="text/css"> 
.box{width:200px;height:200px;background-color:red;transition:1s all;}
/*显示操作*/
.box.ng-enter{opacity:0;}
.box.ng-enter-active{opacity:1;}
/*隐藏操作*/
.box.ng-leave{opacity:1;}
.box.ng-leave-active{opacity:0;}
</style>
</head>
<body>
<div ng-controller="Aaa">
<input type="checkbox" ng-model="bBtn">
<div class="box" ng-if="bBtn"></div>
</div>
<script type="text/javascript">
var m1 = angular.module('myApp',['ngAnimate']);
m1.controller('Aaa',['$scope',function($scope){
$scope.bBtn = true;
}]);
</script>
</body>
</html>
로그인 후 복사

Angular-animate 플러그인을 도입하여 ng-if 명령을 바인딩했습니다. DOM 노드를 삭제하고 추가할 때 Angle은 애니메이션을 쉽게 완료할 수 있도록 지정된 클래스를 추가합니다.

.ng-입력
.ng-입력-활성
.ng-떠나기
.ng-활성 상태

이제 표시와 숨기기를 살펴보세요. 

<!DOCTYPE HTML>
<html ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>ngAnimate插件4</title>
<script type="text/javascript" src="https://code.angularjs.org/1.3.8/angular.min.js"></script>
<script type="text/javascript" src="https://code.angularjs.org/1.3.8/angular-animate.min.js"></script>
<style type="text/css">
.box{width:200px;height:200px;background-color:red;transition:1s all;}
/*显示操作*/
.box.ng-hide-remove{opacity:0;}
.box.ng-hide-remove-active{opacity:1;}
/*隐藏操作*/
.box.ng-hide-add{opacity:1;}
.box.ng-hide-add-active{opacity:0;}
</style>
</head>
<body>
<div ng-controller="Aaa">
<input type="checkbox" ng-model="bBtn">
<div class="box" ng-show="bBtn"></div>
</div>
<script type="text/javascript">
var m1 = angular.module('myApp',['ngAnimate']);
m1.controller('Aaa',['$scope',function($scope){
$scope.bBtn = true;
}]);
</script>
</body>
</html>
로그인 후 복사

.ng-숨기기-제거
.ng-hide-제거-활성
.ng-숨기기-추가
.ng-hide-추가-활성

이 예에서는 표시 및 숨기기에 속하는 ng-show를 사용합니다. 이전 예제는 추가와 삭제에 속하는 ng-if 입니다.

이전 섹션에서 언급한 라우팅을 상기하여 이를 결합할 수 있습니다. 

<!DOCTYPE HTML>
<html ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>ngAnimate插件2</title> <script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="http://cdn.bootcss.com/angular.js/1.3.0-beta.13/angular-route.min.js"></script>
<script type="text/javascript" src="http://cdn.bootcss.com/angular.js/1.3.0-beta.13/angular-animate.min.js"></script> <style type="text/css">
.box{transition:1s all;position:absolute;}
/*显示操作*/
.box.ng-enter{opacity:0;}
.box.ng-enter-active{opacity:1;}
/*隐藏操作*/
.box.ng-leave{opacity:1;}
.box.ng-leave-active{opacity:0;}
</style>
</head>
<body>
<div ng-controller="Aaa">
<a href="javascript:void(0);" ng-click="$location.path('aaa')">首页</a>
<a href="javascript:void(0);" ng-click="$location.path('bbb')">内容</a>
<a href="javascript:void(0);" ng-click="$location.path('ccc')">标题</a>
<div class="box" ng-view></div>
</div>
<script type="text/javascript">
var m1 = angular.module('myApp',['ngRoute','ngAnimate']);
m1.config(['$routeProvider',function($routeProvider){
$routeProvider.when('/aaa',{
template : '<h1>AAA</h1>{{name}}',
controller : 'Aaa'
}).when('/bbb',{
template : '<h1>BBB</h1>{{name}}',
controller : 'Bbb'
}).when('/ccc',{
template : '<h1>CCC</h1>{{name}}',
controller : 'Ccc'
}).otherwise({
redirectTo : '/aaa'
});
}]);
m1.controller('Aaa',['$scope','$location','$routeParams',function($scope,$location,$routeParams){
$scope.name = 'xiecg-Aaa';
$scope.$location = $location;
}]);
m1.controller('Bbb',['$scope',function($scope){
$scope.name = 'xiecg-Bbb';
}]);
m1.controller('Ccc',['$scope',function($scope){
$scope.name = 'xiecg-Ccc';
}]);
</script>
</body>
</html>
로그인 후 복사

페이지를 전환할 때 페이드인 및 페이드아웃 효과가 나타납니다.

이전 장에서 언급한 Baidu 검색을 상기해 보세요. 

<!DOCTYPE HTML>
<html ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>ngAnimate插件3</title> <script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<script type="text/javascript" src="https://code.angularjs.org/1.3.8/angular.min.js"></script>
<script type="text/javascript" src="https://code.angularjs.org/1.3.8/angular-animate.min.js"></script> <style type="text/css">
.box{transition:1s all;}
/*显示操作*/
.box.ng-enter{opacity:0;}
.box.ng-enter-active{opacity:1;}
/*隐藏操作*/
.box.ng-leave{display:none;}
.box.ng-enter-stagger{animation-delay:0.1s;}
</style>
</head>
<body>
<div ng-controller="Aaa">
<input type="text" ng-model="name" ng-keyup="change(name)">
<input type="button" ng-click="change(name)" value="搜索">
<ul>
<li class="box" ng-repeat="d in data">{{d}}</li>
</ul>
</div>
<script type="text/javascript">
var m1 = angular.module('myApp',['ngAnimate']);
m1.controller('Aaa',['$scope','$http','$timeout',function($scope,$http,$timeout){
var timer = null;
$scope.data = [];
$scope.change = function(name){
$timeout.cancel(timer);
timer = $timeout(function(){
$http({
method : 'JSONP',
url : 'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su&#63;wd='+name+'&cb=JSON_CALLBACK',
}).success(function(data,state,headers,config){
console.log(data);
$scope.data = data.s;
}).error(function(data){
console.log(data);
});
},500);
};
}]);
</script>
</body>
</html>
로그인 후 복사

교차 도메인을 통해 Baidu에서 반환된 데이터를 가져와 순차적으로 페이지로 전환합니다.


JS 애니메이션의 예를 살펴보겠습니다. 

<!DOCTYPE HTML>
<html ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>ngAnimate插件5</title>
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<script type="text/javascript" src="https://code.angularjs.org/1.3.8/angular.min.js"></script>
<script type="text/javascript" src="https://code.angularjs.org/1.3.8/angular-animate.min.js"></script>
<style type="text/css">
.box{width:200px;height:200px;background-color:red;}
</style>
</head>
<body>
<div ng-controller="Aaa">
<input type="checkbox" ng-model="bBtn">
<div class="box" ng-if="bBtn"></div>
</div>
<script type="text/javascript">
var m1 = angular.module('myApp',['ngAnimate']);
//ng-if
m1.animation('.box',function(){
return {
//hide（删除）
leave : function(element,done){
//console.log(element,done); //元素节点&删除节点的回调函数
$(element).animate({
width : 0,
height : 0
},1000,done);
},
//show（填充）
enter : function(element,done){
//ng-if会动态创建元素，元素默认就有200的高宽。。。
$(element).css({
width : 0,
height : 0
}).animate({
width : 200,
height : 200
},1000,done);
}
};
});
m1.controller('Aaa',['$scope',function($scope){
$scope.bBtn = true;
}]);
</script>
</body>
</html>
로그인 후 복사

JQ 애니메이션 라이브러리를 사용하여 JS 애니메이션을 완성합니다. 뷰에서 ng-if를 사용하는데, 이는 DOM 노드를 추가하고 삭제하는 것을 의미하므로 컨트롤러에서 Leave&Enter를 반환합니다.

ng-if를 사용하면 JS 애니메이션이 자연스럽게 ng-show가 됩니다. 

<!DOCTYPE HTML>
<html ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>ngAnimate插件5</title>
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<script type="text/javascript" src="https://code.angularjs.org/1.3.8/angular.min.js"></script>
<script type="text/javascript" src="https://code.angularjs.org/1.3.8/angular-animate.min.js"></script>
<style type="text/css">
.box{width:200px;height:200px;background-color:red;}
</style>
</head>
<body>
<div ng-controller="Aaa">
<input type="checkbox" ng-model="bBtn">
<div class="box" ng-show="bBtn"></div>
</div>
<script type="text/javascript">
var m1 = angular.module('myApp',['ngAnimate']);
//ng-show
m1.animation('.box',function(){
return {
//hide（隐藏）
addClass : function(element,sClass,done){
//console.log(element,sClass,done); //元素节点&样式名&删除节点的回调函数
$(element).animate({
width : 0,
height : 0
},1000,done);
},
//show（显示）
removeClass : function(element,sClass,done){
$(element).animate({
width : 200,
height : 200
},1000,done); 
}
};
});
m1.controller('Aaa',['$scope',function($scope){
$scope.bBtn = true;
}]);
</script>
</body>
</html>
로그인 후 복사

숨기기 및 표시를 나타내는 addClass&removeClass를 컨트롤러에 반환합니다.

관련 라벨：
angular动画 angularjs动画demo angularjs动画效果
원천：php.cn
이전 기사：js에서 프로토타입 확장 구현 방법(문자열, 날짜, 배열 확장)_javascript 기술 다음 기사：JavaScript 프로그램 개발_javascript 기술에서 JS 코드를 배치할 위치
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
0ms 수면을 생략하면 CSS 전환이 중단되는 이유는 무엇입니까? 제가 제대로 이해하고 있는지 알아보기 위해 FLIP 애니메이션을 구현해 보려고 합니다. 이 코드펜에서(잘못된 코드를 양해해 주세요. 그냥 장난을 쳤을 뿐입니다) ...
에서 2024-04-06 16:29:50
0
2
490
숨겨진 측면 패널 표시: 선택됨 애니메이션 햄버거 메뉴를 통해 보기로 전환할 수 있는 탐색 메뉴를 측면 패널에 갖고 싶습니다. JS 없이 CSS만 사용하여 만들고 싶습니다. :checked 의사...
에서 2024-04-06 15:49:33
0
1
319
CSS Tailwind를 사용하는 이미지 호버 카드 애니메이션이 예상대로 작동하지 않습니다. <html><body><divclass="groupcardmy-14mx-3w-80h-100bg-gray-800rounded-x...
에서 2024-04-06 13:43:17
0
1
356
스크롤 배경 이미지의 불투명도를 낮추고 최소 불투명도를 제한합니다. 스크롤할 때의 불투명도를 줄이고 랜딩 페이지에서 멀어질 때 배경 이미지를 가져오려고 합니다. 바닐라 자바스크립트를 사용하여 불투명도를 최소 0.5로 낮추려고 합니...
에서 2024-04-04 23:50:53
0
1
1329
스타일이 지정된 구성 요소에 `:after` 의사 요소를 올바르게 적용하기 위한 React.js 가이드 아름다운 밑줄 애니메이션을 찾았습니다 <ul><li><ahref="#">정보</a></li>...
에서 2024-04-04 22:28:08
0
1
1322
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿