AngularJS ng-show自动动画？

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 ). 从w3schools教程中，我认为我了解到ng-animate会自动注意到某些事件并向其中添加动画，例如ng-show（ http://www.w3schools.com/angular/angular_animations.asp ）。

I am wondering why the my div with ng-shows do not animate? 我想知道为什么我的ng-show的div不动画？

The html including css code I am using: 我正在使用的包含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>

The tab2.js file with the controller: var GuitarControllers = angular.module("myApp", ['ngAnimate']); 带有控制器的tab2.js文件：var GuitarControllers = angular.module（“ myApp”，['ngAnimate']）; GuitarControllers.controller('TabController', function (){ this.tab = 1; 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: 我也曾尝试在CSS中添加动画，但是仍然无法正常工作：

    @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. 谢谢。

Answer 1

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 . 您不仅需要添加myChange CSS，而且还需要为.ng-enter ， .ng-enter-active ， .ng-leave和.ng-leave-active添加css。 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 在不尝试重新设计轮子的情况下，我会向您指出这个答案，我认为他们正在尝试执行非常类似的操作https://stackoverflow.com/a/21211543/2236808

Answer 2

Generally, ngAnimate is a weird idea. 通常，ngAnimate是一个奇怪的想法。 Sometimes there's no better way to do animations, but in your case I recommend to just use CSS. 有时没有更好的动画制作方法，但是根据您的情况，我建议仅使用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: 在您的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. 如有问题，请创建Codepen或JSFiddle。

AngularJS ng-show自动动画？

问题描述

2 个解决方案

解决方案1
1 2016-12-05 20:07:38

解决方案2
1 2016-12-05 20:10:08

AngularJS ng-show自动动画？

问题描述

2 个解决方案

解决方案1 1 2016-12-05 20:07:38

解决方案2 1 2016-12-05 20:10:08

解决方案1
1 2016-12-05 20:07:38

解决方案2
1 2016-12-05 20:10:08