AngularJS ng-show automatic animation?
Question
From the w3schools tutorial I thought I understood that ng-animate notices certain events automatically and adds animations to them, like to ng-show ( http://www.w3schools.com/angular/angular_animations.asp ).
I am wondering why the my div with ng-shows do not animate?
The html including css code I am using:
<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>
The tab2.js file with the controller: 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;
};
});
I have also tried adding animate in the css, but it still does not work:
@keyframes myChange {
from {
width: 0;
} to {
width: 100%;
}
}
div.ng-show {
animation: 1s myChange;
}
I am looking for a kind of sliding effect in the tab content when I change tabs (new content slides in). Any other suggestions are welcome, too. Thanks.
2 answers
solution1
1 2016-12-05 20:07:38
From what I can see you don't have all of the correct classes. The way animate works as I'm sure you know, is that it adds classes to the elements as they go through their process. You will need to not only add the myChange css, but you need to also add the css for .ng-enter , .ng-enter-active , .ng-leave , and .ng-leave-active . You will also need to account for when you are sliding left and sliding right. Without attempting to reinvent the wheel, I would point you to this answer, where I think they are attempting to do something very similar https://stackoverflow.com/a/21211543/2236808
solution2
1 2016-12-05 20:10:08
Generally, ngAnimate is a weird idea. Sometimes there's no better way to do animations, but in your case I recommend to just use CSS.
Try to replace the content section with:
<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 />
And in your CSS:
@keyframes myChange {
from {
width: 0;
} to {
width: 100%;
}
}
.content {
overflow: hidden;
width: 0;
}
.slide {
animation: 1s myChange;
}
It should be working well. In case of problem please create Codepen or JSFiddle.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.