javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(popover): add MD animation

Browse Source 
references #5420
This commit is contained in:
Brandy Carney
2016-05-26 13:29:57 -04:00
parent 1e7b57257c
commit 1d0d755214
2 changed files with 21 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/components/popover/popover.md.scss
View File

@@ -14,8 +14,14 @@ $popover-md-box-shadow: 0 3px 12px 2px $alert-md-box-shadow-color
$popover-md-item-background: $popover-md-background !default;
.popover-wrapper {
opacity: 1;
}
.popover-content {
min-width: 0;
min-height: 0;
width: $popover-md-width;
max-height: $popover-md-max-height;
@@ -29,3 +35,7 @@ $popover-md-item-background: $popover-md-background !default;
.popover-content .item {
background-color: $popover-md-item-background;
}
.popover-viewport {
opacity: 0;
}

16
src/components/popover/popover.ts
View File

@@ -158,7 +158,9 @@ export class Popover extends ViewController {
'<div class="popover-wrapper">' +
'<div class="popover-arrow"></div>' +
'<div class="popover-content">' +
'<div #viewport></div>' +
'<div class="popover-viewport">' +
'<div #viewport></div>' +
'</div>' +
'</div>' +
'</div>'
})
@@ -365,14 +367,18 @@ class PopoverMdPopIn extends PopoverTransition {
let ele = enteringView.pageRef().nativeElement;
let wrapper = new Animation(ele.querySelector('.popover-wrapper'));
let content = new Animation(ele.querySelector('.popover-content'));
let viewport = new Animation(ele.querySelector('.popover-viewport'));
wrapper.fromTo('opacity', '0.01', '1');
content.fromTo('maxWidth', '0%', '90%');
content.fromTo('maxHeight', '0%', '90%');
viewport.fromTo('opacity', '0', '1');
this
.easing('ease')
.duration(100)
.fadeIn()
.add(wrapper);
.duration(500)
.add(content)
.add(viewport);
}
play() {