UNPKG

tdesign-mobile-vue

Version:
176 lines (133 loc) 2.48 kB
@import "../_variables.less"; @spin: ~"@{prefix}-spin"; @fade-in: ~"@{prefix}-fade-in"; @fade-out: ~"@{prefix}-fade-out"; @slide-top-in: ~"@{prefix}-slide-top-in"; @slide-top-out: ~"@{prefix}-slide-top-out"; @slide-bottom-in: ~"@{prefix}-slide-bottom-in"; @slide-bottom-out: ~"@{prefix}-slide-bottom-out"; @slide-right-in: ~"@{prefix}-slide-right-in"; @slide-right-out: ~"@{prefix}-slide-right-out"; @slide-left-in: ~"@{prefix}-slide-left-in"; @slide-left-out: ~"@{prefix}-slide-left-out"; @fade-zoom-in: ~"@{prefix}-fade-zoom-in"; @fade-zoom-out: ~"@{prefix}-fade-zoom-out"; @keyframes @spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes @fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes @fade-out { from { opacity: 1; } to { opacity: 0; } } @keyframes @slide-top-in { from { transform: translate3d(0, -100%, 0); } to { transform: translate3d(0, 0, 0); } } @keyframes @slide-top-out { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, -100%, 0); } } @keyframes @slide-bottom-in { from { transform: translate3d(0, 100%, 0); } to { transform: translate3d(0, 0, 0); } } @keyframes @slide-bottom-out { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, 100%, 0); } } @keyframes @slide-right-in { from { transform: translate3d(100%, 0, 0); } to { transform: translate3d(0, 0, 0); } } @keyframes @slide-right-out { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(100%, 0, 0); } } @keyframes @slide-left-in { from { transform: translate3d(-100%, 0, 0); } to { transform: translate3d(0, 0, 0); } } @keyframes @slide-left-out { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-100%, 0, 0); } } @keyframes @fade-zoom-in { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.6); } 100% { opacity: 1; transform: translate(-50%, -50%) scale(1); } } @keyframes @fade-zoom-out { 0% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(.6); } } @keyframes t-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .@{prefix}-icon-loading { animation: t-spin 1s linear infinite; }