AngularJS ng-show 自动动画？答案

【问题标题】：AngularJS ng-show automatic animation?AngularJS ng-show 自动动画？
【发布时间】：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;
    }

我正在寻找一种改变标签时标签内容中的滑动效果（新内容滑入）。也欢迎任何其他建议。谢谢。

【问题讨论】：

标签： javascript html css angularjs ng-animate

【解决方案1】：

据我所知，您没有所有正确的课程。我相信您知道，动画的工作方式是在元素完成过程时将类添加到元素中。您不仅需要添加 myChange css，还需要为 .ng-enter、.ng-enter-active、 添加 css。 ng-leave 和 .ng-leave-active。您还需要考虑何时向左滑动和向右滑动。在不尝试重新发明轮子的情况下，我会向您指出这个答案，我认为他们正在尝试做一些非常相似的事情https://stackoverflow.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。

【讨论】：