Commit f555fa186d714727cd8612d3da4a6ab66ba7a394
1 parent
1223a9a646
Exists in
master
and in
1 other branch
animations for adding a card
Showing 1 changed file with 28 additions and 38 deletions Side-by-side Diff
styles/flashy.css
View file @
f555fa1
| ... | ... | @@ -147,21 +147,22 @@ |
| 147 | 147 | } |
| 148 | 148 | |
| 149 | 149 | /* Card Colors */ |
| 150 | -.card.flashy.cardcolor-blue { | |
| 151 | - background-color: (119, 158, 203, 0.5) !important; | |
| 150 | +.card.flashy.cardcolor-blue div { | |
| 151 | + background-color: rgba(119, 158, 203, 0.5) !important; | |
| 152 | 152 | } |
| 153 | 153 | |
| 154 | -.cardcolor-red { | |
| 155 | - background-color: rgba(255, 105, 97, 0.5) !important; | |
| 154 | +.cardcolor-red div { | |
| 155 | + background-color: rgba(255, 105, 97, 0.5) !important; | |
| 156 | 156 | } |
| 157 | 157 | |
| 158 | -.cardcolor-green { | |
| 159 | - background-color: rgba(119, 190, 119, 0.5) !important; | |
| 158 | +.cardcolor-green div { | |
| 159 | + background-color: rgba(119, 190, 119, 0.5) !important; | |
| 160 | 160 | } |
| 161 | 161 | |
| 162 | -.cardcolor-yellow { | |
| 163 | - background-color: rgba(253, 253, 150, 0.5) !important; | |
| 162 | +.cardcolor-yellow div { | |
| 163 | + background-color: rgba(253, 253, 150, 0.5) !important; | |
| 164 | 164 | } |
| 165 | + | |
| 165 | 166 | /* Card Colors END */ |
| 166 | 167 | |
| 167 | 168 | .modal.bottom-sheet { |
| 168 | 169 | |
| 169 | 170 | |
| 170 | 171 | |
| 171 | 172 | |
| 172 | 173 | |
| 173 | 174 | |
| 174 | 175 | |
| 175 | 176 | |
| ... | ... | @@ -325,56 +326,45 @@ |
| 325 | 326 | |
| 326 | 327 | /* Animation CSS, https://docs.angularjs.org/guide/animations */ |
| 327 | 328 | .repeated-card.ng-enter, |
| 329 | +.repeated-card.ng-enter > flashcard > .card, | |
| 328 | 330 | .repeated-card.ng-leave, |
| 329 | -.repeated-card.ng-move { | |
| 331 | +.repeated-card.ng-move, | |
| 332 | +.repeated-card.ng-move > flashcard > .card { | |
| 330 | 333 | -webkit-transition: 0.5s all cubic-bezier(0, 0, 0.6, 1); |
| 331 | 334 | -moz-transition: 0.5s all cubic-bezier(0, 0, 0.6, 1); |
| 332 | 335 | -o-transition: 0.5s all cubic-bezier(0, 0, 0.6, 1); |
| 333 | - transition: 0.5s all cubic-bezier(0, 0, 0.6, 1); | |
| 336 | + transition: 1s all cubic-bezier(0, 0, 0.6, 1); | |
| 334 | 337 | position: relative; |
| 335 | 338 | } |
| 336 | 339 | |
| 337 | -.repeated-card.ng-enter { | |
| 338 | - top: -150px; | |
| 339 | - opacity:0; | |
| 340 | +.repeated-card.ng-enter > flashcard > .card { | |
| 341 | + z-index: 1; | |
| 342 | + top: -236px; | |
| 343 | + margin-bottom: -230px; | |
| 340 | 344 | } |
| 341 | 345 | |
| 342 | -.repeated-card.ng-enter.ng-enter-active { | |
| 343 | - top: 0; | |
| 346 | +.repeated-card.ng-enter.ng-enter-active > flashcard > .card { | |
| 347 | + top: 0px; | |
| 348 | + margin-bottom: 6px; | |
| 344 | 349 | } |
| 345 | 350 | |
| 346 | -.repeated-card.ng-enter + div { | |
| 347 | - top: -150px; | |
| 348 | -} | |
| 349 | - | |
| 350 | -.repeated-card.ng-enter.ng-enter-active + div { | |
| 351 | - top: 0; | |
| 352 | -} | |
| 353 | - | |
| 354 | 351 | .repeated-card.ng-leave { |
| 355 | 352 | top: 0; |
| 356 | 353 | opacity: 1; |
| 357 | 354 | } |
| 358 | 355 | |
| 359 | 356 | .repeated-card.ng-leave.ng-leave-active { |
| 360 | - top:-60px; | |
| 361 | - opacity:0; | |
| 357 | + top: -60px; | |
| 358 | + opacity: 0; | |
| 362 | 359 | } |
| 363 | 360 | |
| 364 | -.repeated-card.ng-move { | |
| 365 | - top: 150px; | |
| 366 | -} | |
| 361 | +/*.repeated-card.ng-move + div div {*/ | |
| 362 | +/*background-color:blue;*/ | |
| 363 | +/*top: -150px;*/ | |
| 364 | +/*}*/ | |
| 367 | 365 | |
| 368 | -.repeated-card.ng-move.ng-move-active { | |
| 369 | - top: 0; | |
| 370 | -} | |
| 371 | - | |
| 372 | -.repeated-card.ng-move + div { | |
| 373 | - top: -150px; | |
| 374 | -} | |
| 375 | - | |
| 376 | -.repeated-card.ng-move.ng-move-active + div { | |
| 377 | - top: 0; | |
| 366 | +/*.repeated-card.ng-move.ng-move-active + div div{*/ | |
| 367 | +/*top: 0;*/ | |
| 378 | 368 | } |
| 379 | 369 | |
| 380 | 370 | /* Animation CSS END */ |