AngularJS ng-show 自动动画？
Posted
技术标签:
【中文标题】AngularJS ng-show 自动动画？【英文标题】：AngularJS ng-show automatic animation? 【发布时间】：2017-04-20 07:35:20 【问题描述】：从 w3schools 教程中，我认为我了解 ng-animate 会自动注意到某些事件并向它们添加动画，例如 ng-show (http://www.w3schools.com/angular/angular_animations.asp)。
我想知道为什么我的带有 ng-shows 的 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;
我正在寻找一种改变标签时标签内容中的滑动效果（新内容滑入）。也欢迎任何其他建议。谢谢。
【问题讨论】：
【参考方案1】：据我所知，您没有所有正确的课程。我相信您知道，动画的工作方式是在元素完成过程时将类添加到元素中。您不仅需要添加 myChange css，还需要为 .ng-enter、.ng-enter-active、 添加 css。 ng-leave 和 .ng-leave-active。您还需要考虑何时向左滑动和向右滑动。在不尝试重新发明***的情况下，我会向您指出这个答案，我认为他们正在尝试做一些非常相似的事情https://***.com/a/21211543/2236808
【讨论】：
【参考方案2】：一般来说，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 ng-show 自动动画？的主要内容，如果未能解决你的问题，请参考以下文章
AngularJS：ng-show / ng-hide 不适用于` `插值
ng-show 令人不安的 div 布局 - angularJS