Permalink
Browse files

feature: All dialogs can define open and close animations

  • Loading branch information...
MikeMitterer committed Oct 27, 2017
1 parent 091528b commit 832ac5d65fa2bdfd7c6c36be3bbfd2c102609bc9
@@ -43,7 +43,11 @@
visibility : visible;
.mdl-dialog {
opacity : 1;
// opacity : 1;
&.animation.last-state {
opacity : 1;
}
transition : $dialog-swift-ease-out-duration;
transform : translate3d(0, 0, 0) scale(1.0);
}
@@ -7144,11 +7144,12 @@ input[name^='mdl-accordion']:checked ~ .mdl-accordion--content {
background-color: rgba(0, 0, 0, 0.25);
visibility: visible; }
.mdl-dialog-container.is-visible .mdl-dialog, .mdl-datepicker-container.is-visible .mdl-dialog, .mdl-timepicker-container.is-visible .mdl-dialog {
opacity: 1;
-webkit-transition: 0.3s;
transition: 0.3s;
-webkit-transform: translate3d(0, 0, 0) scale(1);
transform: translate3d(0, 0, 0) scale(1); }
.mdl-dialog-container.is-visible .mdl-dialog.animation.last-state, .mdl-datepicker-container.is-visible .mdl-dialog.animation.last-state, .mdl-timepicker-container.is-visible .mdl-dialog.animation.last-state {
opacity: 1; }
.mdl-dialog-container.is-hidden .mdl-dialog, .mdl-datepicker-container.is-hidden .mdl-dialog, .mdl-timepicker-container.is-hidden .mdl-dialog {
-webkit-transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
@@ -8063,14 +8064,9 @@ mdl-draggable {
.mdl-notification-container.is-visible {
background-color: transparent;
visibility: visible; }
.mdl-notification-container.is-visible .mdl-notification {
.mdl-notification-container.is-visible .mdl-notification.animation.last-state {
opacity: 1;
-webkit-transition: all 1s cubic-bezier(0.55, 0, 0.55, 0.2);
transition: all 1s cubic-bezier(0.55, 0, 0.55, 0.2); }
.mdl-notification-container.is-hidden .mdl-notification {
opacity: 0;
-webkit-transition: all 1s cubic-bezier(0.25, 0.8, 0.25, 1);
transition: all 1s cubic-bezier(0.25, 0.8, 0.25, 1); }
border: 1px solid red; }
.mdl-notification-container .mdl-notification {
position: relative;
box-sizing: border-box;
@@ -8094,6 +8090,7 @@ mdl-draggable {
align-items: flex-start;
-ms-flex-negative: 0;
flex-shrink: 0;
opacity: 0;
min-height: 48px;
min-width: 324px;
max-width: 324px;
@@ -8107,6 +8104,8 @@ mdl-draggable {
font-size: 14px;
cursor: default;
margin-bottom: 12px; }
.mdl-notification-container .mdl-notification.animation.closed-state {
opacity: 0; }
.mdl-notification-container .mdl-notification h1, .mdl-notification-container .mdl-notification h2, .mdl-notification-container .mdl-notification h3, .mdl-notification-container .mdl-notification h4, .mdl-notification-container .mdl-notification h5, .mdl-notification-container .mdl-notification h6 {
margin-top: 0;
margin-bottom: 0; }

Large diffs are not rendered by default.

Oops, something went wrong.
@@ -47,22 +47,24 @@
visibility: visible;
.mdl-notification {
opacity : 1;
transition : $notification-swift-ease-in;
//transform : translate3d(0, 0, 0) scale(1.0);
// opacity : 1;
&.animation.last-state {
opacity : 1;
border: 1px solid red;
}
}
}
&.is-hidden {
.mdl-notification {
// hidden
opacity : 0;
transition : $notification-swift-ease-out;
//transform : translate3d(0, 100%, 0) scale(0.2);
}
}
.mdl-notification {
&.animation.closed-state {
opacity : 0;
}
position: relative;
box-sizing: border-box;
background-color: white;
@@ -75,6 +77,7 @@
align-items: flex-start; // ⇾
flex-shrink: 0; // min-height bug
opacity : 0;
min-height: 48px;
min-width: $notification-width;
max-width: $notification-width;
@@ -42,6 +42,9 @@ class StockAnimation {
/// Specify your set of [keyframes]
StockAnimation(this.duration, this.keyframes,this.timing);
static final StockAnimation NoOp =
new StockAnimation(const Duration(milliseconds: 100), _NoOp,AnimationTiming.EASE_IN_OUT);
static final StockAnimation BounceInTop =
new StockAnimation(const Duration(milliseconds: 500), _BounceInTop,AnimationTiming.EASE_IN_OUT);
@@ -61,7 +64,10 @@ class StockAnimation {
new StockAnimation(const Duration(milliseconds: 500), _FlushRight,AnimationTiming.EASE_IN_OUT);
static final StockAnimation MoveUpAndDisappear =
new StockAnimation(const Duration(milliseconds: 400), _MoveUpAndDisappear,AnimationTiming.EASE_IN_OUT);
new StockAnimation(const Duration(milliseconds: 600), _MoveUpAndDisappear,AnimationTiming.EASE_IN_OUT);
static final StockAnimation Shrink =
new StockAnimation(const Duration(milliseconds: 500), _Shrink,AnimationTiming.EASE_IN_OUT);
/// Modify the [StockAnimation] to your needs
///
@@ -47,11 +47,13 @@ class AnimationState {
static const Map<String,String> states = const <String,String>{
"first" : "first-state",
"last" : "last-state"
"last" : "last-state",
"closed" : "closed-state"
};
static List<String> get first => <String>[ BASIC_STATE, states["first"] ];
static List<String> get last => <String>[ BASIC_STATE, states["last"] ];
static List<String> get closed => <String>[ BASIC_STATE, states["closed"] ];
static void removeAllStatesFrom(final dom.HtmlElement element) {
Validate.notNull(element);
@@ -157,7 +159,7 @@ class MdlAnimation {
*/
MdlAnimation.fromStock(this._stockanimation) {
Validate.notNull(_stockanimation);
Validate.isTrue(_stockanimation.keyframes.isNotEmpty);
//Validate.isTrue(_stockanimation.keyframes.isNotEmpty);
_buildRule(_stockanimation.keyframes);
}
@@ -22,6 +22,9 @@
*/
part of mdlanimation;
const _NoOp = const <int, Map<String, Object>>{
};
const _FadeIn = const <int, Map<String, Object>>{
0 : const <String, Object>{
@@ -125,7 +128,7 @@ const _BounceInRight = const <int, Map<String, Object>>{
///
const _FlushRight = const <int, Map<String, Object>>{
0 : const <String, Object>{
"transform" : "translateX(-20px)"},
"transform" : "translateX(-10px)"},
60 : const <String, Object>{
"transform" : "translateX(30px)"},
@@ -144,13 +147,13 @@ const _Shrink = const <int, Map<String, Object>>{
0 : const <String, Object>{
"opacity" : 1 },
10 : const <String, Object>{
"opacity" : 1 },
50 : const <String, Object>{
"opacity" : 0.5 },
100 : const <String, Object>{
"transform" : "scaleY(0)",
"transform" : "scaleY(0.5)",
"height" : 0,
"opacity" : 1 }
"opacity" : 0.2 }
};
/// More on http://codepen.io/MikeMitterer/pen/QjeOov
@@ -159,9 +162,12 @@ const _MoveUpAndDisappear = const <int, Map<String, Object>>{
"opacity" : 1 },
10 : const <String, Object>{
"opacity" : 0.1 },
"opacity" : 0.5 },
90 : const <String, Object>{
"opacity" : 0.2 },
100 : const <String, Object>{
"transform" : "translateY(-50px)",
"opacity" : 0.1 }
"transform" : "translateY(-100px)",
"opacity" : 0 }
};
@@ -14,6 +14,8 @@ enum MdlDialogStatus {
/// Called if ESC is pressed or if the user clicks on the backdrop-Container
typedef void OnCloseCallback(final MaterialDialog dialog, final MdlDialogStatus status);
//final MdlAnimation openAnimation = new MdlAnimation.fromStock(StockAnimation.BounceInBottom);
/// Store strings for class names defined by this component that are used in
/// Dart. This allows us to simply change it in one place should we
/// decide to modify at a later date.
@@ -66,21 +68,26 @@ class DialogConfig {
/// Sets the [MdlAnimation] if the user clicks on close or if the dialog has and "auto-close" timer
final MdlAnimation closeAnimation;
/// Sets the open-[MdlAnimation]
final MdlAnimation openAnimation;
DialogConfig({ final String rootTagInTemplate: "mdl-dialog",
final bool closeOnBackDropClick: true,
final bool acceptEscToClose: true,
final String parentSelector: _DEFAULT_PARENT_SELECTOR,
final bool autoClosePossible: false,
final bool appendNewDialog: false,
final MdlAnimation closeAnimation: null })
final MdlAnimation closeAnimation: null,
final MdlAnimation openAnimation: null })
: this.rootTagInTemplate = rootTagInTemplate,
this.closeOnBackDropClick = closeOnBackDropClick,
this.acceptEscToClose = acceptEscToClose,
this.parentSelector = parentSelector,
this.autoClosePossible = autoClosePossible,
this.appendNewDialog = appendNewDialog,
this.closeAnimation = closeAnimation {
this.closeAnimation = closeAnimation,
this.openAnimation = openAnimation ?? new MdlAnimation.fromStock(StockAnimation.BounceInBottom) {
Validate.notBlank(rootTagInTemplate);
}
@@ -184,9 +191,10 @@ abstract class MaterialDialog extends Object with TemplateComponent, MdlEventLis
_dialogContainer.classes.remove(_cssClasses.IS_HIDDEN);
_dialogContainer.classes.remove(_cssClasses.APPENDING);
// Give Transition a chance to kick in
new Timer(new Duration(milliseconds: 100), () {
_dialogContainer.classes.add(_cssClasses.IS_VISIBLE);
_dialogContainer.classes.add(_cssClasses.IS_VISIBLE);
_config.openAnimation(dialog).then((_) {
AnimationState.setState(dialog, AnimationState.last);
});
idCounter++;
@@ -264,7 +272,12 @@ abstract class MaterialDialog extends Object with TemplateComponent, MdlEventLis
if(_config.closeAnimation != null && _element != null) {
final MdlAnimation animation = _config.closeAnimation;
return animation(_element).then((_) => _destroy(status));
AnimationState.removeAllStatesFrom(dialog);
return animation(_element).then((_) {
AnimationState.setState(dialog, AnimationState.closed);
_destroy(status);
});
} else {
return new Future.delayed(new Duration(milliseconds: 200), () {
@@ -8,8 +8,6 @@ class _MaterialNotificationCssClasses {
const _MaterialNotificationCssClasses();
}
final MdlAnimation shrinkNotification = new MdlAnimation.fromStock(StockAnimation.MoveUpAndDisappear);
class _NotificationConfig extends DialogConfig {
static const _MaterialNotificationCssClasses _cssClasses = const _MaterialNotificationCssClasses();
@@ -19,7 +17,7 @@ class _NotificationConfig extends DialogConfig {
autoClosePossible: true,
appendNewDialog: true,
acceptEscToClose: false,
closeAnimation: shrinkNotification
closeAnimation: new MdlAnimation.fromStock(StockAnimation.MoveUpAndDisappear)
);
}
@@ -16,7 +16,8 @@ part of mdldialog;
class _SnackbarConfig extends DialogConfig {
_SnackbarConfig() : super(rootTagInTemplate: "mdl-snackbar",
closeOnBackDropClick: false,
autoClosePossible: true);
autoClosePossible: true,
openAnimation: new MdlAnimation.fromStock(StockAnimation.NoOp));
}

0 comments on commit 832ac5d

Please sign in to comment.