@import '../style/themes/index.less'; @keyframes text-animate-right { 33% { margin-left: -10 * @rpx; } 66% { margin-left: 10 * @rpx; } 100% { margin-left: 0 * @rpx; } } @keyframes text-animate-midd { 0% { margin-left: 44 * @rpx; } 100% { margin-left: 0 * @rpx; } } @keyframes text-animate-left { 33% { margin-left: 10 * @rpx; } 66% { margin-left: -10 * @rpx; } 100% { margin-left: 0 * @rpx; } } .text-move-right { animation-name: text-animate-right; animation-duration: 500ms; } .text-move-left { animation-name: text-animate-left; animation-duration: 500ms; } .text-move-midd { animation-name: text-animate-midd; animation-duration: 500ms; } .ant-swipe { width: 100%; height: 100%; overflow: hidden; &-action { height: 100%; position: relative; &-movable { width: 100%; height: 100%; &-content { height: 100%; position: relative; &-view { height: 100%; &-modal { width: 100%; height: 100%; background: transparent; position: absolute; left: 0; top: 0; z-index: 9; } } &-right { height: 100%; color: @COLOR_WHITE; &-text { height: 100%; display: flex; align-items: center; justify-content: center; transition: all 120ms cubic-bezier(0.2, 0.2, 0.8, 1); .right-text { text-align: center; white-space: nowrap; } } } &-left { position: absolute; right: 0; top: 0; color: @COLOR_WHITE; display: flex; flex-direction: row; justify-content: flex-end; &-text1 { height: 100%; display: flex; align-items: center; justify-content: flex-end; transition: all 120ms cubic-bezier(0.2, 0.2, 0.8, 1); .right-text { text-align: center; white-space: nowrap; } } } } } } } .ant-swipe-action-is-right-swipe { display: flex; flex-direction: row; justify-content: flex-end; }