Coplex解决方案

Question

我正在尝试将CSS3过渡添加到我的代码中，但是对这些类的含义感到困惑：

.ng-hide-add
.ng-hide-active

和

.ng-hide-remove 
.ng-hide-remove-active

我试图添加一个简单的轻松和放大器缓解这一点，但不确定我应该添加哪些类！

Answer 1

Coplex解决方案

有动画隐藏/显示（复杂示例）的complette解决方案： https://github.com/mirekh/Todolist_app_bootstrap

或尝试以下示例。

1。 HTML文件

1.1。放入文件正文 index.html

/ * 文件index.html（正文） * /

<p>
    Click this: <input type="checkbox" ng-model="checked">
</p>
<div>
    <div class="check-element animate-show" ng-show="checked">
        <span class="glyphicon glyphicon-thumbs-up"></span>
        I show up when your checkbox is checked.
    </div>
</div>
<div>
    <div class="check-element animate-show" ng-hide="checked">
        <span class="glyphicon glyphicon-thumbs-down"></span>
        I hide when your checkbox is checked.
    </div>
</div>

请记住2行： + <script src="lib/angular/angular-animate.js"></script> + <link rel="stylesheet" href="css/animation.css"/>

1.2。完成index.html

Complette index.html如下所示：

/ * 文件index.html * /

<html lang="en" ng-app="myApp">
<head>
    <meta charset="utf-8">
    <title>Todolist AngularJS App</title>
    <!-- css -->
    <link rel="stylesheet" href="css/app.css"/>
    <link rel="stylesheet" href="css/animation.css"/>
</head>
<body>
    <!--
    insert main code here (body from [1])
    -->

    <script src="lib/angular/angular.js"></script>
    <script src="lib/angular/angular-animate.js"></script>
    <script src="lib/angular/angular-route.js"></script>
    <script src="js/app.js"></script>
    <script src="js/services.js"></script>
    <script src="js/controllers.js"></script>
    <!-- opional -->
    <script src="js/factories.js"></script>
    <script src="js/filters.js"></script>
    <script src="js/directives.js"></script>
</body>
</html>

2。 CSS文件

/ * 文件：animations.css * /

.animate-show {
    -webkit-transition:all linear 0.5s;
    transition:all linear 0.5s;
    line-height:20px;
    opacity:1;
    padding:10px;
    border:1px solid black;
    background:white;
}

.animate-show.ng-hide-add,
.animate-show.ng-hide-remove {
    display:block!important;
}

.animate-show.ng-hide {
    line-height:0;
    opacity:0;
    padding:0 10px;
}

.check-element {
    padding:10px;
    border:1px solid black;
    background:white;
}

Answer 2

在要显示/隐藏的元素上添加animate-show类 add ng：show argument with related expression

<div class="animate-show" ng:show="expression">
    My content hide and show.
</div>

ngAnimate 1.2 with ngShow / ngHide

2 个答案:

Coplex解决方案

1。 HTML文件

1.1。放入文件正文 index.html

1.2。完成index.html

2。 CSS文件