animation.scss 708 B

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455
  1. // 闪烁
  2. .animation-twinkle {
  3. animation: twinkle 2s ease;
  4. animation-iteration-count: infinite;
  5. opacity: 1;
  6. }
  7. @keyframes twinkle {
  8. 0% {
  9. opacity: 1;
  10. }
  11. 50% {
  12. opacity: 0.5;
  13. }
  14. 100% {
  15. opacity: 1;
  16. }
  17. }
  18. // 淡入淡出
  19. .v-modal-enter {
  20. animation: v-modal-in 0.2s ease;
  21. }
  22. .v-modal-leave {
  23. animation: v-modal-out 0.2s ease forwards;
  24. }
  25. @keyframes v-modal-in {
  26. 0% {
  27. opacity: 0;
  28. }
  29. 100% {
  30. }
  31. }
  32. @keyframes v-modal-out {
  33. 0% {
  34. }
  35. 100% {
  36. opacity: 0;
  37. }
  38. }
  39. // 移动动画
  40. .list-complete-item {
  41. transition: all 1s;
  42. }
  43. .list-complete-enter,
  44. .list-complete-leave-to {
  45. opacity: 0;
  46. transform: translateY(30px);
  47. }
  48. .list-complete-leave-active {
  49. position: absolute;
  50. }