发表新帖
发表新帖

Slide up/down effect with ng-show and ng-animate

后端 未结
关注
8 732
一个人的身影
一个人的身影 2020-12-07 14:40

I\'m trying to use ng-animate to get a behavior similar to JQuery\'s slideUp() and slideDown(). Only I\'d rather use ng-show

相关标签:
8条回答
  • 离开以前
    2020-12-07 15:00

    This can actually be done in CSS and very minimal JS just by adding a CSS class (don't set styles directly in JS!) with e.g. a ng-clickevent. The principle is that one can't animate height: 0; to height: auto; but this can be tricked by animating the max-height property. The container will expand to it's "auto-height" value when .foo-open is set - no need for fixed height or positioning.

    .foo {
    max-height: 0;
}

.foo--open {
    max-height: 1000px; /* some arbitrary big value */
    transition: ...
}

    see this fiddle by the excellent Lea Verou

    As a concern raised in the comments, note that while this animation works perfectly with linear easing, any exponential easing will produce a behaviour different from what could be expected - due to the fact that the animated property is max-height and not height itself; specifically, only the height fraction of the easing curve of max-height will be displayed.

    0 讨论(0)
  • 无人共我
    2020-12-07 15:09

    I ended up abandoning the code for my other answer to this question and going with this answer instead.

    I believe the best way to do this is to not use ng-show and ng-animate at all.

    /* Executes jQuery slideDown and slideUp based on value of toggle-slidedown 
   attribute.  Set duration using slidedown-duration attribute.  Add the 
   toggle-required attribute to all contained form controls which are
   input, select, or textarea.  Defaults to hidden (up) if not specified
   in slidedown-init attribute.  */
fboApp.directive('toggleSlidedown', function(){
    return {
        restrict: 'A',
        link: function (scope, elem, attrs, ctrl) {
            if ('down' == attrs.slidedownInit){
                elem.css('display', '');
            } else {
                elem.css('display', 'none');
            }
            scope.$watch(attrs.toggleSlidedown, function (val) {
                var duration = _.isUndefined(attrs.slidedownDuration) ? 150 : attrs.slidedownDuration;
                if (val) {
                    elem.slideDown(duration);
                } else {
                    elem.slideUp(duration);
                }
            });
        }
    }
});
    0 讨论(0)
  • 长发绾君心
    2020-12-07 15:10

    I've written an Angular directive that does slideToggle() without jQuery.

    https://github.com/EricWVGG/AngularSlideables

    0 讨论(0)
  • 北恋
    2020-12-07 15:11

    What's wrong with actually using ng-animate for ng-show as you mentioned?

    <script src="lib/angulr.js"></script>
<script src="lib/angulr_animate.js"></script>
<script>
    var app=angular.module('ang_app', ['ngAnimate']);
    app.controller('ang_control01_main', function($scope) {

    });
</script>
<style>
    #myDiv {
        transition: .5s;
        background-color: lightblue;
        height: 100px;
    }
    #myDiv.ng-hide {
        height: 0;
    }
</style>
<body ng-app="ang_app" ng-controller="ang_control01_main">
    <input type="checkbox" ng-model="myCheck">
    <div id="myDiv" ng-show="myCheck"></div>
</body>
    0 讨论(0)
  • 臣服心动
    2020-12-07 15:12

    update for Angular 1.2+ (v1.2.6 at the time of this post):

    .stuff-to-show {
  position: relative;
  height: 100px;
  -webkit-transition: top linear 1.5s;
  transition: top linear 1.5s;
  top: 0;
}
.stuff-to-show.ng-hide {
  top: -100px;
}
.stuff-to-show.ng-hide-add,
.stuff-to-show.ng-hide-remove {
  display: block!important;
}

    (plunker)

    0 讨论(0)
  • 南笙
    2020-12-07 15:12

    You should use Javascript animations for this - it is not possible in pure CSS, because you can't know the height of any element. Follow the instructions it has for you about javascript animation implementation, and copy slideUp and slideDown from jQuery's source.

    0 讨论(0)
 看不清?
提交回复
热议问题