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.