Angulaire 2 faites Glisser vers le Haut et vers le Bas de l'Animation

J'ai récemment construit à la suite Angulaire 2 Lire Plus de composant. Ce que ce composant n'est réduire et développer les longs blocs de texte avec "Lire la suite" et "Lire Moins" liens de. Non pas sur la base du nombre de caractères, mais sur la base de la hauteur max.

import { Component, Input, ElementRef, AfterViewInit } from '@angular/core';

@Component({
    selector: 'read-more',
    template: `
        <div [innerHTML]="text" [class.collapsed]="isCollapsed" [style.height]="isCollapsed ? maxHeight+'px' : 'auto'">
        </div>
            <a *ngIf="isCollapsable" (click)="isCollapsed =! isCollapsed">Read {{isCollapsed? 'more':'less'}}</a>
    `,
    styles: [`
        div.collapsed {
            overflow: hidden;
        }
    `]
})
export class ReadMoreComponent implements AfterViewInit {

    //the text that need to be put in the container
    @Input() text: string;

    //maximum height of the container
    @Input() maxHeight: number = 100;

    //set these to false to get the height of the expended container 
    public isCollapsed: boolean = false;
    public isCollapsable: boolean = false;

    constructor(private elementRef: ElementRef) {
    }

    ngAfterViewInit() {
        let currentHeight = this.elementRef.nativeElement.getElementsByTagName('div')[0].offsetHeight;
       //collapsable only if the contents make container exceed the max height
        if (currentHeight > this.maxHeight) {
            this.isCollapsed = true;
            this.isCollapsable = true;
        }
    }
}

Et utilisé comme:

<read-more [text]="details" [maxHeight]="250"></read-more>

Le composant fonctionne bien. Maintenant, j'ai besoin d'ajouter un peu de glisser vers le haut/vers le bas de l'animation dans le composant de sorte que lors de la Lecture Plus le lien est cliqué sur le contenu de glisser vers le bas et lors de la Lecture moins est cliqué, le contenu de la diapositive jusqu'à spécifiées hauteur max.

Quelqu'un peut s'il vous plaît guide comment faire?

Voir ma réponse ici. L'exemple est à peu près exactement ce que vous essayez de faire.
Merci threeve, j'ai effectivement essayé d'ajouter le style ci-dessous les infos de mon ci-dessus, mais cela ne semble pas fonctionner. styles: [` div.s'est effondré { overflow: hidden; }, div { transition: hauteur 500ms l'aise; }`]
Si cela fonctionne pour vous, pouvez-vous valide ma solution s'il vous plaît?
La solution ne semble fonctionner que dans un sens - faites glisser vers le haut.

OriginalL'auteur Naveed Ahmed | 2016-06-15

  1. 13

    Automatique de calcul des propriétés

    Animation automatisées de calcul de la hauteur

    Parfois vous ne connaissez pas la valeur de la dimension propriété de style
    jusqu'à ce que l'exécution. Par exemple, les éléments ont souvent des largeurs et des hauteurs
    qui dépendent de leur contenu et de la taille de l'écran. Ces propriétés sont
    souvent difficile à animer à l'aide de CSS.

    Dans ces cas, vous pouvez utiliser une * valeur de la propriété, de sorte que le
    la valeur de la propriété est calculée à l'exécution, puis branché sur le
    de l'animation.

    Dans cet exemple, le congé d'animation prend quelle que soit la hauteur de l'élément
    a, devant elle, les feuilles et les anime de cette hauteur à zéro :

    animations: [
  trigger('shrinkOut', [
    state('in', style({height: '*'})),
    transition('* => void', [
      style({height: '*'}),
      animate(250, style({height: 0}))
    ])
  ])
]

    Angulaire de la documentation officielle : https://angular.io/guide/animations#automatic-property-calculation

    essayé cela, mais le texte à l'intérieur de l'élément n'est pas animé, mais quand j'ai mis de la couleur d'arrière-plan, il a travaillé en quelque sorte pour le conteneur, le soin de dire pourquoi?
    Cette solution glisser vers le haut (effondrement / masquer) seulement ? Et pas vers le bas (développer / spectacle) ?

    OriginalL'auteur Julien

  2. 11

    Ma Solution avec :enter, :leave et *ngIf:

    @Component({
    selector: 'accordion',
    templateUrl: './accordion.component.html',
    animations: [
        trigger('slideInOut', [
            state('in', style({height: '*', opacity: 0})),
            transition(':leave', [
                style({height: '*', opacity: 1}),

                group([
                    animate(300, style({height: 0})),
                    animate('200ms ease-in-out', style({'opacity': '0'}))
                ])

            ]),
            transition(':enter', [
                style({height: '0', opacity: 0}),

                group([
                    animate(300, style({height: '*'})),
                    animate('400ms ease-in-out', style({'opacity': '1'}))
                ])

            ])
        ])
    ]
})
...

    Modèle:

    <div *ngIf="shown" [@slideInOut] >
    //...content
</div>

    Malheureusement, j'ai dû intégrer cette correction (slideOut):
    https://github.com/angular/angular/issues/15798

    OriginalL'auteur Felix

  3. 2

    Threeve réponse est bonne - le seul problème est que la transition CSS ne fonctionne pas avec "auto". Donc, vous avez besoin pour capturer l'auto de hauteur dans la ngAfterViewInit fonction et l'enregistrer comme une chaîne de caractères. Notez aussi l'utilisation de la fonction setTimeout pour arrêter le "unidirectionnel-flux de données-erreur de violation d'" qui peuvent se produire.

    import { Component, Input, ElementRef, AfterViewInit } from '@angular/core';
@Component({
selector: 'read-more',
template: `
<div [style.height]="isCollapsed ? maxHeight+'px' : autoHeight">
<ng-content></ng-content>
</div> 
<span *ngIf="isCollapsable" class="btn-link cpointer" (click)="isCollapsed =! isCollapsed">Read {{isCollapsed? 'more':'less'}} ...</span>
`,
styles: [` div { overflow-y: hidden; 
-moz-transition: height .5s;
-ms-transition: height .5s;
-o-transition: height .5s;
-webkit-transition: height .5s;
transition: height .5s; ease;}
.cpointer {cursor:pointer; }
`]
})
export class ReadMoreComponent implements AfterViewInit {
@Input()
maxHeight: number = 40; //two lines
////set these to false to get the height of the expended container 
isCollapsed: boolean = false;
isCollapsable: boolean = false;
autoHeight: string= "auto";
constructor(private elementRef: ElementRef) {}
ngAfterViewInit() {
//Inportant !!
//wait a tick to avoid one-time devMode
//unidirectional-data-flow-violation error
setTimeout(_ => {
let currentHeight = this.elementRef.nativeElement.getElementsByTagName('div')[0].offsetHeight;
this.autoHeight = currentHeight + "px";
//collapsable only if the contents make container exceed the max height
if (currentHeight >= this.maxHeight) {
this.isCollapsed = true;
this.isCollapsable = true;
}
}
);
}
}

    OriginalL'auteur Ron Brill