角显示/隐藏动画 [英] Angular show / hide with animation

查看：109
本文介绍了角显示/隐藏动画的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我想淡出一个div，然后显示一个新的div但我的code是坏了。我该如何解决？淡出动画作品，但showManagement格不会出现。

HTML 

 ＆LT; D​​IV NG隐藏=隐藏NG-CLASS ={褪色：startFade}＆GT;
    ＆所述; P＆gt;这是启动应褪色＆所述内容; / P＆GT;
＆LT; / DIV＆GT;
＆LT; D​​IV CLASS =showManagementNG-秀=showManagement＆GT;
    ＆所述; P＆gt;这是一次渐变结束要显示的新内容及所述; / P＆GT;
＆LT; / DIV＆GT;

JS 

  $ scope.getManagement =功能（）{    $ scope.startFade =真;    $超时（函数（）{
        $ scope.hidden = TRUE;
    }，2000）;    //这是不显示的部分
    $ scope.showManagement = TRUE;
 };

CSS 

  .fade {
    过渡：不透明度3秒。
    不透明度：0;
}


解决方案

既然你没有提供您的控制器并没有表现出在那里你调用函数 getManagement（），我会假设你希望所有的淡出淡入事件表明后角加载2秒内。

下面是关于codePEN 的例如你如何实现你的目标你的方法。

和这里的code：

HTML 

 ＆LT;机身NG-应用=对myApp＆GT;
  ＆LT; D​​IV CLASS =包装NG-控制器=MainCtrl＆GT;
    ＆LT; D​​IV纳克级={褪色：startFade}＆GT;
        ＆所述; P＆gt;这是启动应褪色＆所述内容; / P＆GT;
    ＆LT; / DIV＆GT;
    ＆LT; D​​IV纳克级={hideManagement：hideManagement，showManagement：showManagement}＆GT;
        ＆所述; P＆gt;这是一次渐变结束要显示的新内容及所述; / P＆GT;
    ＆LT; / DIV＆GT;
  ＆LT; / DIV＆GT;
＆LT; /身体GT;

CSS 

  .fade {
    过渡：不透明度3秒。
    不透明度：0;
}.hideManagement {
  不透明度：0;
}.showManagement {
    过渡：不透明度3S 3S;
    不透明度：1;
}

JS 

 角
  .module（'对myApp'，[]）
  .controller（'MainCtrl'，['$范围，$超时'，函数（$范围，$超时）{
    $ scope.startFade = FALSE;
    $ scope.showManagement = FALSE;
    $ scope.hideManagement = TRUE;    $超时（函数（）{
      $ scope.startFade =真;
      $ scope.showManagement = TRUE;
      $ scope.hideManagement = FALSE;
    }，2000）;
  }]）;

你必须牢记以下几点：


    与CSS3过渡;块：;
  1. 您不能动画的显示无和显示。这就是为什么 NG-隐藏在 .showManagement 不与过渡效果显示。你应该继续使用透明度来实现这一目标，就好像你在纳克级做={褪色：startFade}

  2. 在您的角控制器的初始化开始的状态。在你提供的例子，这是一个有点困惑你如何设置你的 $ scope.showManagement ， $ scope.hidden 和 $ scope.startFade 。一旦你设置你喜欢我提供的例子初始状态，它会更清楚，什么样的状态的改变，你应该做的功能，无论是在 $超时回调或者其他一些功能触发其他事件

  3. 要制作 .showManagement 淡入第一之后＆LT; D​​IV＆GT; 完成它的淡出效果，您可以设置在CSS转换的延迟。

如果你正在做的更复杂的动画，你应该尝试利用上 ngAnimate 服务。随着ngAnimate，你可以在这个例子中摆脱那些纳克级，并简单地用 .ng进入， .ng进入活性， .ng隐藏， .ng -hide活性，它会自动绑定到你的元素被角。这里的为 ngAnimate 。<官方文档 / p>

I'm trying to fade out a div and then show a new div but my code is broken. How can I fix? The fade-out animation works but the showManagement div does not appear.

HTML

<div ng-hide="hidden" ng-class="{fade: startFade}">
    <p>this is start content that should be faded</p>
</div>
<div class="showManagement" ng-show="showManagement">
    <p>this is the new content to be displayed once the fade is complete.</p>
</div>

JS

$scope.getManagement = function () {

    $scope.startFade = true;

    $timeout(function(){
        $scope.hidden = true;
    }, 2000);

    // this is the part that doesn't display
    $scope.showManagement = true;
 };

CSS

.fade{
    transition: opacity 3s;
    opacity: 0;
}

解决方案

Since you didn't provide your controller and didn't show where you call the function getManagement(), I'll assume that you want all the fade-out fade-in events show within 2 seconds after angular loaded.

Here's an example on CodePen for how you can achieve your goal with your approach.

And here's the code:

HTML

<body ng-app="myApp">
  <div class="wrapper" ng-controller="MainCtrl">
    <div ng-class="{fade: startFade}">
        <p>this is start content that should be faded</p>
    </div>
    <div ng-class="{hideManagement: hideManagement, showManagement: showManagement}">
        <p>this is the new content to be displayed once the fade is complete.</p>
    </div>
  </div>
</body>

CSS

.fade{
    transition: opacity 3s;
    opacity: 0;
}

.hideManagement {
  opacity: 0;
}

.showManagement {
    transition: opacity 3s 3s;
    opacity: 1;
}

JS

angular
  .module('myApp', [])
  .controller('MainCtrl', ['$scope', '$timeout', function($scope, $timeout) {
    $scope.startFade = false;
    $scope.showManagement = false;
    $scope.hideManagement = true;

    $timeout(function(){
      $scope.startFade = true;
      $scope.showManagement = true;
      $scope.hideManagement = false;
    }, 2000);
  }]);

A few things you have to keep in mind:

  1. You cannot animate your display: none; and display: block; with CSS3 transition. This is the reason why ng-hide in your .showManagement is not showing with transition effect. You should keep using opacity to achieve this goal, just like you did in ng-class="{fade: startFade}"
  2. Initialize your state at the beginning of your Angular controller. In the example your provide, it's a little bit confusing how you set your $scope.showManagement, $scope.hidden, and $scope.startFade. Once you setup your initial state like the example I provide, it would be more clear that what kind of states change you should make in the function, whether it's in a $timeout callback or some other functions trigger by other events
  3. To make .showManagement fade-in right after the first <div> finishing it's fade-out effect, you may set the delay in css transition.

If you are doing more complex animation, you should try leveraging on ngAnimate service. With ngAnimate, you can get rid of those ng-class in this example, and simply binding your animation rules with .ng-enter, .ng-enter-active, .ng-hide, .ng-hide-active, which are automatically bind to your elements by Angular. Here's the official documentation for ngAnimate.

这篇关于角显示/隐藏动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆