.label { width: 120px; } .prize-list-enter-active { -webkit-animation: slide-right 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; animation: slide-right 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; } .prize-list-leave-active { -webkit-animation: slide-left 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; animation: slide-left 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; } .prize-operate-enter-active { // 延时显示 animation: show-operate 0.6s; -webkit-animation: show-operate 0.6s; } @-webkit-keyframes slide-right { 0% { -webkit-transform: translateX(0); transform: translateX(0); } 100% { -webkit-transform: translateX(30px); transform: translateX(30px); } } @keyframes slide-right { 0% { -webkit-transform: translateX(-200px); transform: translateX(-200px); } 100% { -webkit-transform: translateX(0); transform: translateX(0); } } @-webkit-keyframes slide-left { 0% { -webkit-transform: translateX(0); transform: translateX(0); } 100% { -webkit-transform: translateX(-100px); transform: translateX(-100px); } } @keyframes slide-left { 0% { -webkit-transform: translateX(0); transform: translateX(0); } 100% { -webkit-transform: translateX(-400px); transform: translateX(-400px); } } @-webkit-keyframes show-operate { 0% { opacity: 0; } 99% { opacity: 0; } 100% { opacity: 1; } } @keyframes show-operate { 0% { opacity: 0; } 99% { opacity: 0; } 100% { opacity: 1; } }