Permalink
Browse files

feature: Added some more StockAnimations

  • Loading branch information...
MikeMitterer committed Feb 26, 2016
1 parent edda9fc commit 2d6f1f39458f01004852d7ac4f1789a20deeba3b
@@ -44,10 +44,30 @@ body .mdl-splashscreen {
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center; }
body .mdl-splashscreen--opacity-10 {
opacity: 0.1; }
body .mdl-splashscreen--opacity-20 {
opacity: 0.2; }
body .mdl-splashscreen--opacity-30 {
opacity: 0.3; }
body .mdl-splashscreen--opacity-40 {
opacity: 0.4; }
body .mdl-splashscreen--opacity-50 {
opacity: 0.5; }
body .mdl-splashscreen--opacity-60 {
opacity: 0.6; }
body .mdl-splashscreen--opacity-70 {
opacity: 0.7; }
body .mdl-splashscreen--opacity-80 {
opacity: 0.8; }
body .mdl-splashscreen--opacity-90 {
opacity: 0.9; }
body .mdl-splashscreen--opacity-100 {
opacity: 1; }
body .mdl-splashscreen .spinner {
margin: 100px auto;
width: 40px;
height: 40px;
width: 100px;
height: 100px;
position: relative;
text-align: center;
-webkit-animation: sk-rotate 2.0s infinite linear;

Some generated files are not rendered by default. Learn more.

Oops, something went wrong.
@@ -62,10 +62,21 @@ body {
align-content : stretch; // ||
align-items : center; // ↓
&--opacity-10 { opacity: 0.1; }
&--opacity-20 { opacity: 0.2; }
&--opacity-30 { opacity: 0.3; }
&--opacity-40 { opacity: 0.4; }
&--opacity-50 { opacity: 0.5; }
&--opacity-60 { opacity: 0.6; }
&--opacity-70 { opacity: 0.7; }
&--opacity-80 { opacity: 0.8; }
&--opacity-90 { opacity: 0.9; }
&--opacity-100 { opacity: 1; }
.spinner {
margin : 100px auto;
width : 40px;
height : 40px;
width : 100px;
height : 100px;
position : relative;
text-align : center;
-webkit-animation : sk-rotate 2.0s infinite linear;
@@ -32,26 +32,48 @@
*/
class StockAnimation {
/// Specifies the length of the animation
final Duration duration;
Duration duration;
/// The keyframes for the animation
final Map<int, Map<String, Object>> keyframes;
final AnimationTiming timing;
AnimationTiming timing;
/// Specify your set of [keyframes]
const StockAnimation(this.duration, this.keyframes,this.timing);
StockAnimation(this.duration, this.keyframes,this.timing);
static const StockAnimation BounceInRight =
const StockAnimation(const Duration(milliseconds: 500), _BounceInRight,AnimationTiming.EASE_IN_OUT);
static final StockAnimation BounceInTop =
new StockAnimation(const Duration(milliseconds: 500), _BounceInTop,AnimationTiming.EASE_IN_OUT);
static const StockAnimation FadeIn =
const StockAnimation(const Duration(milliseconds: 500), _FadeIn,AnimationTiming.EASE_IN_OUT);
static final StockAnimation BounceInBottom =
new StockAnimation(const Duration(milliseconds: 500), _BounceInBottom,AnimationTiming.EASE_IN_OUT);
static const StockAnimation FadeOut =
const StockAnimation(const Duration(milliseconds: 500), _FadeOut,AnimationTiming.EASE_IN_OUT);
static final StockAnimation BounceInRight =
new StockAnimation(const Duration(milliseconds: 500), _BounceInRight,AnimationTiming.EASE_IN_OUT);
static const StockAnimation MoveUpAndDisappear =
const StockAnimation(const Duration(milliseconds: 400), _MoveUpAndDisappear,AnimationTiming.EASE_IN_OUT);
static final StockAnimation FadeIn =
new StockAnimation(const Duration(milliseconds: 500), _FadeIn,AnimationTiming.EASE_IN_OUT);
static final StockAnimation FadeOut =
new StockAnimation(const Duration(milliseconds: 500), _FadeOut,AnimationTiming.EASE_IN_OUT);
static final StockAnimation FlushRight =
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);
/// Modify the [StockAnimation] to your needs
///
/// final MdlAnimation bounceIn = new MdlAnimation.fromStock(
/// StockAnimation.BounceInTop.change(duration: new Duration(milliseconds: 800)));
///
StockAnimation change({ final Duration duration }) {
final StockAnimation newVersion = new StockAnimation(this.duration,this.keyframes,this.timing);
if(duration != null) {
newVersion.duration = duration;
}
return newVersion;
}
}
@@ -40,6 +40,48 @@ const _FadeOut = const <int, Map<String, Object>>{
"opacity" : 0}
};
/// Base-Sample on
/// * [CodePen](http://codepen.io/MikeMitterer/pen/grYEJW)
///
const _BounceInTop = const <int, Map<String, Object>>{
0 : const <String, Object>{
"opacity" : 0,
"transform" : "translateY(-800px)"},
60 : const <String, Object>{
"opacity" : 1,
"transform" : "translateY(30px)"},
80 : const <String, Object>{
"opacity" : 0.8,
"transform" : "translateY(-30px)"},
100 : const <String, Object>{
// Final state should be visible
"opacity" : 1,
"transform" : "translateY(0)"}
};
const _BounceInBottom = const <int, Map<String, Object>>{
0 : const <String, Object>{
"opacity" : 0,
"transform" : "translateY(800px)"},
60 : const <String, Object>{
"opacity" : 1,
"transform" : "translateY(-30px)"},
80 : const <String, Object>{
"transform" : "translateY(30px)"},
100 : const <String, Object>{
// Final state should be visible
"opacity" : 1,
"transform" : "translateY(0)"}
};
const _BounceInRight = const <int, Map<String, Object>>{
0 : const <String, Object>{
@@ -59,6 +101,25 @@ const _BounceInRight = const <int, Map<String, Object>>{
"transform" : "translateX(0)"}
};
/// Base-Sample on
/// * [CodePen](http://codepen.io/MikeMitterer/pen/grYEJW)
///
const _FlushRight = const <int, Map<String, Object>>{
0 : const <String, Object>{
"transform" : "translateX(-20px)"},
60 : const <String, Object>{
"transform" : "translateX(30px)"},
80 : const <String, Object>{
"opacity" : 0.8,
"transform" : "translateX(-10px)"},
100 : const <String, Object>{
"opacity" : 0,
"transform" : "translateX(100vw)"}
};
/// More on http://codepen.io/MikeMitterer/pen/QjeOov
const _Shrink = const <int, Map<String, Object>>{
0 : const <String, Object>{
@@ -104,7 +104,13 @@ abstract class MdlComponent extends Object with MdlEventListener {
/// Searches for child of [element] based on the given [selector]
///
/// Shortcut to [element.querySelector]
dom.Element query(final String selector) => element.querySelector(selector);
dom.Element query(final String selector) {
final dom.Element result = element.querySelector(selector);
if(result == null) {
_logger.warning("Could not find '$selector' within $element!");
}
return result;
}
//- private -----------------------------------------------------------------------------------

0 comments on commit 2d6f1f3

Please sign in to comment.