Fixed #797

primefaces · Aug 27, 2016 · f1d4878 · f1d4878
1 parent 167d57b
commit f1d4878
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 4 deletions.
diff --git a/components/panel/panel.ts b/components/panel/panel.ts
@@ -1,4 +1,4 @@
-import {NgModule,Component,Input,Output,EventEmitter} from '@angular/core';
+import {NgModule,Component,Input,Output,EventEmitter,trigger,state,transition,style,animate} from '@angular/core';
 import {CommonModule} from '@angular/common';
 
 @Component({
@@ -13,11 +13,26 @@ import {CommonModule} from '@angular/common';
                     <span class="fa fa-fw" [ngClass]="{'fa-minus': !collapsed,'fa-plus':collapsed}"></span>
                 </a>
             </div>
-            <div class="ui-panel-content ui-widget-content" [style.display]="collapsed ? 'none' : 'block'">
-                <ng-content></ng-content>
+            <div class="ui-panel-content-wrapper" @panelContent="collapsed ? 'hidden' : 'visible'" 
+                [ngClass]="{'ui-panel-content-wrapper-overflown': collapsed||animating}">
+                <div class="ui-panel-content ui-widget-content">
+                    <ng-content></ng-content>
+                </div>
             </div>
         </div>
-    `
+    `,
+    animations: [
+        trigger('panelContent', [
+            state('hidden', style({
+                height: '0px'
+            })),
+            state('visible', style({
+                height: '*'
+            })),
+            transition('visible => hidden', animate('400ms cubic-bezier(0.86, 0, 0.07, 1)')),
+            transition('hidden => visible', animate('400ms cubic-bezier(0.86, 0, 0.07, 1)'))
+        ])
+    ],
 })
 export class Panel {
 
@@ -37,7 +52,10 @@ export class Panel {
 
     protected hoverToggler: boolean;
 
+    protected animating: boolean;
+
     toggle(event) {
+        this.animating = true;
         this.onBeforeToggle.emit({originalEvent: event, collapsed: this.collapsed});
 
         if(this.toggleable) {            
@@ -49,6 +67,11 @@ export class Panel {
 
         this.onAfterToggle.emit({originalEvent: event, collapsed: this.collapsed});   
 
+        //TODO: Use onDone of animate callback instead with RC6
+        setTimeout(() => {
+            this.animating = false;
+        }, 400);
+
         event.preventDefault();
     }
 

diff --git a/showcase/resources/css/site.css b/showcase/resources/css/site.css
@@ -691,5 +691,8 @@ pre {
     width: 2.4em;
 }
 
+.ui-panel-content-wrapper-overflown {
+    overflow: hidden;
+}