12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061 |
- @mixin transform($trans) {
- -webkit-transform: $trans;
- -moz-transform: $trans;
- -ms-transform: $trans;
- -o-transform: $trans;
- transform: $trans;
- }
- @mixin transition($trans) {
- -moz-transition: $trans;
- -ms-transition: $trans;
- transition: $trans;
- }
- /*平滑动画,向上滑入,向下滑出*/
- @keyframes slidedown {
- from {
- transform: translateY(0);
- }
- to {
- transform: translateY(100%);
- }
- }
- @-webkit-keyframes slidedown {
- from {
- -webkit-transform: translateY(0);
- }
- to {
- -webkit-transform: translateY(100%);
- }
- }
- @-webkit-keyframes slideup {
- from {
- -webkit-transform: translateY(100%);
- }
- to {
- -webkit-transform: translateY(0);
- }
- }
- @keyframes slideup {
- from {
- transform: translateY(100%);
- }
- to {
- transform: translateY(0);
- }
- }
- .slidedown {
- animation: slidedown 0.3s linear;
- animation-fill-mode:forwards;
- @include transform(translateY(100%));
- }
- .slideup {
- animation: slideup 0.3s linear;
- animation-fill-mode:forwards;
- @include transform(translateY(0));
- }
|