AngularJS ng-show自動動畫？
[英]AngularJS ng-show automatic animation?
問題描述
從w3schools教程中，我認為我了解到ng-animate會自動注意到某些事件並向其中添加動畫，例如ng-show（ http://www.w3schools.com/angular/angular_animations.asp ）。
我想知道為什么我的ng-show的div不動畫？
我正在使用的包含CSS代碼的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'，function（）{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;
}
我在更改標簽時會在標簽內容中尋找一種滑動效果（新內容會滑入其中）。 也歡迎任何其他建議。 謝謝。
2 個解決方案
解決方案1
1 2016-12-05 20:07:38
從我可以看到，您沒有所有正確的類。 我確定您知道，動畫化的工作方式是在元素通過過程時向元素中添加類。 您不僅需要添加myChange CSS，而且還需要為.ng-enter ， .ng-enter-active ， .ng-leave和.ng-leave-active添加css。 您還需要考慮向左滑動和向右滑動的時間。 在不嘗試重新設計輪子的情況下，我會向您指出這個答案，我認為他們正在嘗試執行非常類似的操作https://stackoverflow.com/a/21211543/2236808
解決方案2
1 2016-12-05 20:10:08
通常，ngAnimate是一個奇怪的想法。 有時沒有更好的動畫制作方法，但是根據您的情況，我建議僅使用CSS。
嘗試將內容部分替換為：
<div class="content" ng-class="{slide:panel.isSelected(1) }">
<p class="longDescription"> 1</p>
</div>
<div class="content" ng-class="{slide:panel.isSelected(2) }">
<p class="longDescription"> 2</p>
</div>
<div class="content" ng-class="{slide:panel.isSelected(3) }">
<p class="longDescription"> 3</p>
</div><br />
在您的CSS中：
@keyframes myChange {
from {
width: 0;
} to {
width: 100%;
}
}
.content {
overflow: hidden;
width: 0;
}
.slide {
animation: 1s myChange;
}
它應該運作良好。 如有問題，請創建Codepen或JSFiddle。
angularjs 中的吳秀
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.