angularjs chained fade-in / fade-out transition

前端 未结 3 1509
说谎
说谎 2020-12-24 14:50

I have looked at the official show/hide transition example at the bottom of this page... http://docs.angularjs.org/api/ng.directive:ngShow

I have tried to modify it

相关标签:
3条回答
  • 2020-12-24 15:35

    You can use ng-animate in conjuction with ng-show (http://docs.angularjs.org/api/ngAnimate), available from Angular 1.1.4. Or alternatively simply apply a show class when the model is ticked and apply your show and animation to the class.

    <label><input type="checkbox" ng-model="showElement" />Show div</label>
    <div ng-class="{show: showElement}"></div>
    
    0 讨论(0)
  • 2020-12-24 15:44

    I used the example in ngShow to make the following jsfiddle based on angular1.2.0-rc.3.

    The html code:

    <div ng-app="App">
      Click me: <input type="checkbox" ng-model="checked"><br/>
         <div class="check-element animate-show" ng-show="checked">
          <span class="icon-thumbs-up"></span> I show up when your checkbox is checked.
        </div>
        <div class="check-element animate-show" ng-hide="checked">
          <span class="icon-thumbs-down"></span> I hide when your checkbox is checked.
        </div>
    </div>
    

    The CSS styles

    .animate-show.ng-hide-add, 
    .animate-show.ng-hide-remove {
      -webkit-transition:all linear 0.5s;
      -moz-transition:all linear 0.5s;
      -o-transition:all linear 0.5s;
      transition:all linear 0.5s;
      display:block!important;
    }
    
    .animate-show.ng-hide-add.ng-hide-add-active,
    .animate-show.ng-hide-remove {
      line-height:0;
      opacity:0;
      padding:0 10px;
    }
    
    .animate-show.ng-hide-add,
    .animate-show.ng-hide-remove.ng-hide-remove-active {
      line-height:20px;
      opacity:1;
      padding:10px;
      border:1px solid black;
      background:white;
    }
    
    .check-element {
      padding:10px;
      border:1px solid black;
      background:white;
    }
    

    And finally the JavaScript code, don't forget to include the libraries angular.js and angular-animate.js

    angular.module('App', ['ngAnimate']);
    

    I hope it helps you ;)

    0 讨论(0)
  • 2020-12-24 15:52

    Using the ngAnimate module, you can do this in pure CSS with the -transition-delay directive:

    Plunker

    HTML

    <body ng-app="ngAnimate">
      Click me: <input type="checkbox" ng-model="checked">
      <br/>
      <img ng-show="checked" src="img1.jpg">
      <img ng-hide="checked" src="img2.jpg">
    </body>
    

    CSS

    img {
      position: absolute;
    }
    
    .ng-hide-add-active {
      display: block!important;
      -webkit-transition: 0.5s linear all;
      transition: 0.5s linear all;
    }
    
    .ng-hide-remove-active {
      display: block!important;
      -webkit-transition: 0.5s linear all;
      transition: 0.5s linear all;
      -webkit-transition-delay: 0.5s;
      transition-delay: 0.5s;
    }
    
    .ng-hide {
      opacity: 0;
    }
    
    0 讨论(0)
提交回复
热议问题