Snazzy animations for new post widget
position: fixed;
top: 0;
left: 0;
- bottom: 0;
- right: 0;
+ width: 100%;
+ height: 100%;
background-color: #1E1E1E;
}
padding: 0 12pt;
}
+.blerg-post.enter {
+ animation: blerg-post-enter 750ms;
+}
+
+@keyframes blerg-post-enter {
+ from {
+ transform: translateY(-100%);
+ animation-timing-function: ease-in;
+ }
+
+ 60% {
+ transform: translateY(0);
+ animation-timing-function: ease-out;
+ }
+
+ 80% {
+ transform: translateY(-2%);
+ animation-timing-function: ease-in;
+ }
+
+ to {
+ transform: translateY(0);
+ }
+}
+
+.blerg-post.exit {
+ animation: blerg-post-exit 500ms forwards;
+}
+
+@keyframes blerg-post-exit {
+ from {
+ transform: translateY(0);
+ animation-timing-function: ease-in;
+ }
+
+ to {
+ transform: translateY(100%);
+ }
+}
+
.login {
display: inline-block;
width: 200px;
this.$.toolbar.reflow();
this.reflow();
} else {
- this.hide();
+ setTimeout(function() {
+ this.hide();
+ this.removeClass('exit');
+ }.bind(this), 500);
}
+ this.addRemoveClass('enter', inEvent.showing);
+ this.addRemoveClass('exit', !inEvent.showing);
},
updatePreview: function(inSender, inEvent) {
this.$.preview.setContent(blerg.Util.blergFormat(this.getData()));