Effet de glissement haut/bas avec ng-show et ng-animate

Question

Effet de glissement haut/bas avec ng-show et ng-animate

Demandé el 21 de Mai, 2013: Quand la question a-t-elle été
31874 affichage: Nombre de visites la question a
3 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

J'essaie d'utiliser ng-animate pour obtenir un comportement similaire à celui de JQuery. slideUp() y slideDown() . Seulement, je préfère utiliser ng-show

Je regarde le tutoriel ng-animate ici http://www.yearofmoo.com/2013/04/animation-in-angularjs.html ,

et je peux reproduire l'effet de fondu en entrée/sortie dans l'exemple fourni.

Comment pourrais-je modifier le css pour obtenir un comportement de glissement vers le haut/bas ? De plus, si possible, il est préférable que le fichier css ne connaisse pas la hauteur du composant en pixels. De cette façon, je peux réutiliser le css pour différents éléments.

Demandé el 21 de Mai, 2013 par Tony Lâmpada

1 votes

Je ne pense pas que vous serez en mesure de faire en sorte que ng-show gère les animations. Ce n'est pas son utilisation prévue. C'est à cela que sert ng-animate. Pourquoi voulez-vous utiliser spécifiquement ng-show ?

Commenté el 21 de Mai, 2013 par Jonathan Palumbo

1 votes

Merci Jonathan. Je pense que vous vous trompez. L'exemple donné fait exactement cela : une combinaison de ng-show et de ng-animate (cherchez "Animating ngShow & ngHide"). Quoi qu'il en soit, ce que je veux, c'est simplement un effet pour afficher/cacher une division qui glisse vers le haut et vers le bas.

Commenté el 21 de Mai, 2013 par Tony Lâmpada

0 votes

Mon erreur, je n'ai pas fait usage de ng-animate. Il semble qu'ils fonctionnent en conjonction l'un avec l'autre.

Commenté el 21 de Mai, 2013 par Jonathan Palumbo

Afficher 2 autres commentaires

Answer 1

3 Réponses

Answer 2

6voto

steampowered Points 2179

Cette animation javascript basée sur des classes fonctionne dans AngularJS 1.2 (et 1.4 testé)

Modifier : J'ai fini par abandonner ce code pour prendre une direction complètement différente. J'aime mon autre réponse est bien meilleure . Cette réponse vous posera des problèmes dans certaines situations.

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();}
    }
}

}) ;

Il suffit d'ajouter le .ng-hide-toggle-slidedown à l'élément conteneur, et le comportement de glissement vers le bas de jQuery sera mis en œuvre sur la base de la classe ng-hide.

Vous devez inclure le $(element).css({display:'none'}) dans le beforeRemoveClass car jQuery n'exécutera pas un slideDown à moins que l'élément ne soit dans un état de display: none avant de lancer l'animation jQuery. AngularJS utilise le code CSS

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

pour masquer l'élément. jQuery n'est pas au courant de cet état, et il aura besoin de l'élément display:none avant la première animation de glissement vers le bas.

L'animation AngularJS ajoutera le .ng-hide-animate y .ng-animate pendant que l'animation se déroule.

Répondu el 20 de Juillet, 2015 par steampowered (2179 Points )

Answer 3

3voto

Andy Joslin Points 23231

Vous devez utiliser des animations Javascript pour cela - ce n'est pas possible en CSS pur, car vous ne pouvez pas connaître la hauteur d'un élément. Suivez les instructions qu'il a pour vous sur l'implémentation des animations javascript, et copiez slideUp et slideDown depuis la source de jQuery.

Répondu el 21 de Mai, 2013 par Andy Joslin (23231 Points )

Answer 4

0voto

Blauhirn Points 15

Qu'y a-t-il de mal à utiliser ng-animate para ng-show comme vous l'avez mentionné ?

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

Répondu el 1 de Avril, 2016 par Blauhirn (15 Points )

Effet de glissement haut/bas avec ng-show et ng-animate

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

Effet de glissement haut/bas avec ng-show et ng-animate

Réponses

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: