wassname/cardsforscience
1
0
Fork 0
mirror of https://github.com/wassname/cardsforscience.git synced 2026-07-21 12:30:50 +08:00
Code Issues Packages Projects Releases Wiki Activity

Animation for score

Browse Source
This commit is contained in:
gitea
2016-02-27 19:43:08 +08:00
parent c59c5eef0d
commit e1306cf35a
5 changed files with 325 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files
css/style.css
+228 -14
View File
@@ -97,24 +97,24 @@ h1 br {
/* Floating updates */
.update-value {
position: absolute;
right: 1em;
top: 1.42857em;
position: relative;
right: -2em;
top: -1.42857em;
height: 1.42857em;
}
.update-plus {
color: green;
float: left;
right: 5px;
position: absolute;
/*right: -1em;*/
/*top: -1em;*/
position: relative;
}
.update-minus {
color: red;
float: left;
right: 5px;
position: absolute;
/*right: -1em;*/
/*top: -1em;*/
position: relative;
}
#labname {
@@ -135,8 +135,8 @@ h1 br {
}
.col-no-padding {
padding-right: 0;
padding-left: 0;
padding-right: 0px;
padding-left: 0px;
}
.tab-content {
@@ -310,16 +310,21 @@ h1 br {
}
.element {
font-size: 3em;
font-weight: bold;
border: 0px;
padding: 1px;
z-index: 50;
min-width: 50px;
min-height: 50px;
}
.element.empty {
opacity: 0.2;
}
.white-badge.empty {
opacity: 0.2;
opacity: 0;
}
.col-little-padding{
padding-right: 1px;
padding-left: 1px;
}
#observationsContent {
font-size: 24px;
@@ -444,5 +449,214 @@ h1 br {
}
.guess-wrong{
}
/** ng animate **/
.hand.ng-enter,
.hand.ng-leave
{
-webkit-transition: 200ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
-moz-transition: 200ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
-ms-transition: 200ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
-o-transition: 200ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
transition: 200ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
position: relative;
display: block;
overflow: hidden;
text-overflow: clip;
white-space:nowrap;
}
.hand.ng-leave.hand.ng-leave-active,
.hand.ng-enter {
opacity: 0;
width: 0px;
height: 0px;
}
.hand.ng-enter.hand.ng-enter-active,
.hand.ng-leave {
opacity: 1;
width: 150px;
height: 30px;
}
.mainline.ng-enter {
-webkit-animation: enter 600ms cubic-bezier(0.445, 0.050, 0.550, 0.950);
animation: enter 600ms cubic-bezier(0.445, 0.050, 0.550, 0.950);
display: block;
position: relative;
}
@-webkit-keyframes enter {
from {
opacity: 0;
height: 0px;
top: -70px;
}
75% {
top: 15px;
}
to {
opacity: 1;
height: 30px;
top: 0px;
}
}
@keyframes enter {
from {
opacity: 0;
height: 0px;
top: -70px;
}
75% {
top: 15px;
}
to {
opacity: 1;
height: 30px;
top: 0px;
}
}
/* you can also define the transition style
on the base class as well (.repeat-item) */
.repeat-item.ng-enter,
.repeat-item.ng-leave {
-webkit-transition:0.25s linear all;
transition:0.25s linear all;
}
.repeat-item.ng-enter,
.repeat-item.ng-leave.ng-leave-active {
opacity:0;
}
.repeat-item.ng-leave,
.repeat-item.ng-enter.ng-enter-active {
opacity:1;
}
.add-item.ng-enter {
-webkit-transition:0.25s linear all;
transition:0.25s linear all;
}
.add-item.ng-enter {
opacity:0;
}
.fadein,
.fadeout {
-webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 1.5s;
-moz-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 1.5s;
-o-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 1.5s;
transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 1.5s;
}
.fadein.ng-hide-remove,
.fadeout.ng-hide-add.ng-hide-add-active {
opacity: 0;
display: block !important;
}
.fadeout.ng-hide-add,
.fadein.ng-hide-remove.ng-hide-remove-active {
opacity: 1;
display: block !important;
}
.mainline.ng-leave {
-webkit-animation: leave 600ms cubic-bezier(0.445, 0.050, 0.550, 0.950);
animation: leave 600ms cubic-bezier(0.445, 0.050, 0.550, 0.950);
display: block;
position: relative;
}
@-webkit-keyframes leave {
to {
opacity: 0;
height: 0px;
top: -70px;
}
25% {
top: 15px;
}
from {
opacity: 1;
height: 30px;
top: 0px;
}
}
@keyframes leave {
to {
opacity: 0;
height: 0px;
top: -70px;
}
25% {
top: 15px;
}
from {
opacity: 1;
height: 30px;
top: 0px;
}
}
.add-from-top.ng-enter
{
-webkit-transition: 200ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
-moz-transition: 200ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
-ms-transition: 200ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
-o-transition: 200ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
transition: 200ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
position: relative;
display: block;
}
.add-from-top.ng-enter.add-from-top.ng-enter-active {
opacity: 1;
top: 0;
height: 30px;
}
.add-from-top.ng-enter {
opacity: 0;
top: -50px;
height: 0px;
}
.add-from-right.ng-enter
{
-webkit-transition: 200ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
-moz-transition: 200ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
-ms-transition: 200ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
-o-transition: 200ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
transition: 200ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
position: relative;
display: block;
}
.add-from-right.ng-enter.add-from-right.ng-enter-active {
opacity: 1;
right: 0;
height: 30px;
}
.add-from-right.ng-enter {
opacity: 0;
right: -50px;
height: 0px;
}
/** It's hard to get rid of the padding on rows because it's meant to compensate for
margin left -15px on rows. So we fix it this way **/
.col-no-padding-xs .row {
margin-left: 0;
margin-right: 0;
}
.col-no-padding .row {
margin-left: 0;
margin-right: 0;
}