Hopiu/vue-material
1
0
Fork 0
mirror of https://github.com/Hopiu/vue-material.git synced 2026-03-16 22:10:27 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Improve transitions

Browse source
This commit is contained in:
Marcos Moura 2016-11-21 02:45:35 -02:00
parent afd0f7270f
commit 68714bc7eb
2 changed files with 14 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
src/components/mdDialog/mdDialog.scss
View file

@ -20,7 +20,8 @@
opacity: 1 !important;
transform: scale(1) !important;
transition: $swift-ease-out;
transform-property: opacity, transform;
transition-property: opacity, transform, border-radius;
border-radius: 2px;
> * {
opacity: 1;
@ -42,17 +43,22 @@
position: relative;
z-index: 110;
outline: none;
border-radius: 2px;
border-radius: 24px;
opacity: 0;
box-shadow: $material-shadow-14dp;
transform: scale(.9, .85);
transform-origin: top left;
transform-origin: center center;
transition: opacity $swift-ease-out-duration $swift-ease-out-timing-function,
border-radius $swift-ease-out-duration .1s $swift-ease-out-timing-function,
transform $swift-ease-out-duration .05s $swift-ease-out-timing-function;
will-change: opacity, transform;
will-change: opacity, transform, border-radius;
&.md-transition-off {
transition: none;
transition: none !important;
}
&.md-with-reference {
transform-origin: top center;
}
> * {

5
src/components/mdDialog/mdDialog.vue
View file

@ -42,13 +42,14 @@
computed: {
classes() {
return {
'md-fullscreen': this.mdFullscreen,
'md-active': this.active
};
},
dialogClasses() {
return {
'md-transition-off': this.transitionOff
'md-fullscreen': this.mdFullscreen,
'md-transition-off': this.transitionOff,
'md-with-reference': this.mdOpenFrom || this.mdCloseTo
};
},
styles() {