0
w3schools 튜토리얼에서 ng-animate는 특정 이벤트를 자동으로 인식하고 ng-show (http://www.w3schools.com/angular/angular_animations.asp)와 같은 애니메이션을 애니메이션에 추가하는 것으로 알고 있다고 생각했습니다.AngularJS ng-show 자동 애니메이션?
왜 ng-show가있는 내 div가 애니메이션으로 나타나지 않는지 궁금합니다.
CSS 코드 I가 사용하고 포함한 HTML :<html ng-app="myApp">
<head>
<title> AngularJS Tabs</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.js"></script>
<script src="tab2.js"></script>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<style>
p {
font-size: 22px;
font-weight: bold;
font-style: italic;
color: rgb(62, 62, 62);
background-color: rgb(6, 179, 6);
margin: 18px;
}
ul {
float: left;
border-radius: 5px;
border: solid 1px rgb(198, 198, 198);
padding: 7px 11px;
background-color: rgb(248, 248, 248);
}
li {
float: left;
background-color: rgb(200, 200, 200);
padding: 5px 19px;
margin: 5px 2px 5px 0px;
color: black;
list-style: none;
}
li:hover,
li:hover a {
background-color: rgb(6, 179, 6);
color: white;
}
li a {
text-decoration: none;
color: white;
font-size: 21px;
font-style: italic;
text-shadow: 1px 0px 3px rgb(157, 157, 157);
}
li:nth-child(1) {
border-radius: 4px 0px 0px 4px;
margin-left: 1px;
}
li:nth-child(3) {
border-radius: 0px 4px 4px 0px;
}
.active {
background-color: rgb(6, 179, 6);
}
</style>
</head>
<body>
<section class="tab" ng-controller="TabController as panel">
<ul>
<li ng-class="{active:panel.isSelected(1) }">
<a href ng-click="panel.selectTab(1)">Description</a>
</li>
<li ng-class="{active:panel.isSelected(2) }">
<a href ng-click="panel.selectTab(2)">Specifications</a>
</li>
<li ng-class="{active:panel.isSelected(3)}">
<a href ng-click="panel.selectTab(3)">Reviews</a>
</li>
</ul>
<br /><br /><br /><br />
<div ng-show="panel.isSelected(1)">
<p class="longDescription"> 1</p>
</div>
<div ng-show="panel.isSelected(2)">
<p class="longDescription"> 2</p>
</div>
<div ng-show="panel.isSelected(3)">
<p class="longDescription"> 3</p>
</div><br />
</section>
</body>
</html>
제어기와 tab2.js 파일 : VAR의 GuitarControllers = angular.module ("을 myApp"[ 'ngAnimate']); GuitarControllers.controller ('TabController', 기능() { this.tab = 1;
this.selectTab = function (setTab){
this.tab = setTab;
};
this.isSelected = function(checkTab) {
return this.tab === checkTab;
};
});
나는 또한 CSS에서 애니메이션을 추가하는 시도,하지만 여전히 작동하지 않습니다
@keyframes myChange {
from {
width: 0;
} to {
width: 100%;
}
}
div.ng-show {
animation: 1s myChange;
}
탭을 변경할 때 탭 콘텐트에서 일종의 슬라이딩 효과를 찾고 있습니다 (새로운 콘텐트 슬라이드가 있음). 다른 제안도 환영합니다. 감사합니다.