Schieben Sie den Effekt mit ng-show und ng-animate nach oben / unten

Ich versuche ng-animate, ein ähnliches Verhalten wie bei JQuery slideUp()und zu erzielen slideDown(). Nur ich würde lieber verwendenng-show

Ich schaue mir das ng-animate-Tutorial hier an - http://www.yearofmoo.com/2013/04/animation-in-angularjs.html ,

und ich kann den Ein- / Ausblendeffekt in dem bereitgestellten Beispiel reproduzieren.

Wie kann ich das CSS ändern, um ein Auf- / Ab-Verhalten zu erzielen? Wenn möglich, ist es auch besser, wenn das CSS die Komponentenhöhe in Pixel nicht kennt. Auf diese Weise kann ich das CSS für verschiedene Elemente wiederverwenden.

Ich habe eine Angular-Direktive geschrieben, die slideToggle()auf jQuery verzichtet.

https://github.com/EricWVGG/AngularSlideables

Das ist eigentlich ziemlich einfach. Alles was Sie tun müssen, ist das CSS zu ändern.

Hier ist eine Geige mit einer sehr einfachen Überblendanimation: http://jsfiddle.net/elthrasher/sNpjH/

Um daraus eine gleitende Animation zu machen, musste ich zuerst mein Element in eine Box legen (das ist der Foliencontainer), dann ein weiteres Element hinzufügen, um das verlassene zu ersetzen, nur weil ich dachte, es würde schön aussehen. Nehmen Sie es heraus und das Beispiel wird immer noch funktionieren.

Ich habe das Animations-CSS von "Überblenden" in "Folie" geändert, aber bitte beachten Sie, dass dies die Namen sind, die ich ihm gegeben habe. Ich hätte eine Folienanimation mit dem Namen "Fade" oder irgendetwas anderes schreiben können.

Der wichtige Teil ist, was in der CSS ist. Hier ist das Original-Fade-CSS:

.fade-hide, .fade-show {
    -webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
    -moz-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
    -o-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
    transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
}
.fade-hide {
    opacity:1;
}
.fade-hide.fade-hide-active {
    opacity:0;
}
.fade-show {
    opacity:0;
}
.fade-show.fade-show-active {
    opacity:1;
}

Dieser Code ändert die Deckkraft des Elements von 0 (vollständig transparent) auf 1 (vollständig undurchsichtig) und wieder zurück. Die Lösung besteht darin, die Deckkraft in Ruhe zu lassen und stattdessen die Oberseite zu ändern (oder nach links, wenn Sie sich von links nach rechts bewegen möchten).

.slide-hide, .slide-show {
    -webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 1.5s;
    -moz-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 1.5s;
    -o-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 1.5s;
    transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 1.5s;
}
.slide-hide {
    position: relative;
    top: 0;
}
.slide-hide.slide-hide-active {
    position: absolute;
    top: -100px;
}
.slide-show {
    position: absolute;
    top: 100px;
}
.slide-show.slide-show-active {
    position: relative;
    top: 0px;
}

Ich wechsle auch von der relativen zur absoluten Positionierung, sodass jeweils nur eines der Elemente Platz im Container einnimmt.

Hier ist das fertige Produkt: http://jsfiddle.net/elthrasher/Uz2Dk/ . Hoffe das hilft!

Update für Angular 1.2+ (v1.2.6 zum Zeitpunkt dieses Beitrags):

.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 )

Dies kann tatsächlich in CSS und sehr minimalem JS erfolgen, indem einfach eine CSS-Klasse (setzen Sie Stile nicht direkt in JS!) Mit z ng-click. B. einem Ereignis hinzugefügt wird . Das Prinzip ist, dass man nicht animieren kann height: 0;, height: auto;aber dies kann durch Animieren der max-heightEigenschaft ausgetrickst werden . Der Container wird beim .foo-openEinstellen auf den Wert "Automatische Höhe" erweitert - keine feste Höhe oder Positionierung erforderlich.

.foo {
    max-height: 0;
}

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

sehen Sie diese Geige von der ausgezeichneten Lea Verou

Beachten Sie in den Kommentaren, dass diese Animation zwar perfekt mit linearer Beschleunigung funktioniert, jede exponentielle Beschleunigung jedoch ein anderes Verhalten hervorruft als erwartet - aufgrund der Tatsache, dass die animierte Eigenschaft selbst ist max-heightund nicht heightselbst; Insbesondere wird nur der heightBruchteil der Lockerungskurve von max-heightangezeigt.

Am Ende habe ich den Code für meine andere Antwort auf diese Frage aufgegeben und stattdessen diese Antwort gewählt.

Ich glaube , der beste Weg , dies zu tun , ist nicht zu verwenden , ng-showund ng-animateüberhaupt.

/* 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);
                }
            });
        }
    }
});

Diese klassenbasierte Javascript-Animation funktioniert in AngularJS 1.2 (und 1.4 getestet)

Bearbeiten : Am Ende habe ich diesen Code aufgegeben und bin eine ganz andere Richtung gegangen. Ich mag meine andere Antwort viel besser . Diese Antwort gibt Ihnen in bestimmten Situationen einige Probleme.

myApp.animation('.ng-show-toggle-slidedown', function(){
  return {
    beforeAddClass : function(element, className, done){
        if (className == 'ng-hide'){
            $(element).slideUp({duration: 400}, done);
        } else {done();}
    },
    beforeRemoveClass :  function(element, className, done){
        if (className == 'ng-hide'){
            $(element).css({display:'none'});
            $(element).slideDown({duration: 400}, done);
        } else {done();}
    }
}

});

Fügen Sie einfach die .ng-hide-toggle-slidedownKlasse zum Containerelement hinzu, und das jQuery-Folienverhalten wird basierend auf der ng-hide-Klasse implementiert.

Sie müssen die $(element).css({display:'none'})Zeile in die beforeRemoveClassMethode aufnehmen, da jQuery kein slideDown ausführt, es sei denn, das Element befindet sich display: nonevor dem Starten der jQuery-Animation in einem Zustand von . AngularJS verwendet das CSS

.ng-hide:not(.ng-hide-animate) {
    display: none !important;
}

um das Element auszublenden. jQuery ist dieser Status nicht bekannt, und jQuery benötigt die display:noneAnimation vor dem ersten Herunterrutschen.

Die AngularJS-Animation fügt die Klassen .ng-hide-animateund hinzu .ng-animate, während die Animation ausgeführt wird.

Sie sollten dafür Javascript-Animationen verwenden - dies ist in reinem CSS nicht möglich, da Sie die Höhe eines Elements nicht kennen. Befolgen Sie die Anweisungen zur Implementierung von Javascript-Animationen und kopieren Sie slideUp und slideDown aus der Quelle von jQuery.

Was ist los mit tatsächlich verwenden ng-animatefür , ng-showwie Sie erwähnt haben ?

<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>