transitions.css 1.3 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182
  1. .fade-enter-active,
  2. .fade-leave-active {
  3. transition: opacity 0.3s ease;
  4. }
  5. .fade-enter-from,
  6. .fade-leave-to {
  7. opacity: 0;
  8. }
  9. .fade-absolute-enter-active,
  10. .fade-absolute-leave-active {
  11. transition: opacity 0.3s ease;
  12. }
  13. .fade-absolute-enter-from,
  14. .fade-absolute-leave-to {
  15. position: absolute;
  16. opacity: 0;
  17. }
  18. .fade-up-enter-active,
  19. .fade-up-leave-active {
  20. transition:
  21. opacity 0.3s ease,
  22. transform 0.3s ease-in-out;
  23. }
  24. .fade-up-enter-from,
  25. .fade-up-leave-to {
  26. opacity: 0;
  27. transform: translateY(0.3rem);
  28. }
  29. .fade-move-enter-active,
  30. .fade-move-move,
  31. .fade-move-leave-active {
  32. transition: opacity 0.5s ease;
  33. }
  34. .fade-move-leave-active {
  35. position: absolute;
  36. top: -100%; /* Add overflow clip on parent to hide elements */
  37. }
  38. .fade-move-enter-from,
  39. .fade-move-leave-to {
  40. opacity: 0;
  41. }
  42. .collapse-enter-active,
  43. .collapse-leave-active {
  44. transition:
  45. height 0.2s ease-in-out,
  46. opacity 0.2s ease;
  47. overflow: hidden;
  48. }
  49. .collapse-enter-from,
  50. .collapse-leave-to {
  51. opacity: 0;
  52. }
  53. .pseudo-transition-enter-active,
  54. .pseudo-transition-leave-active {
  55. transition: transform 0.3s ease;
  56. }
  57. .pseudo-transition-enter-from,
  58. .pseudo-transition-leave-to {
  59. transform: translateY(0);
  60. }
  61. .slide-down-enter-active,
  62. .slide-down-leave-active {
  63. transition: transform 0.2s ease;
  64. }
  65. .slide-down-enter-from,
  66. .slide-down-leave-to {
  67. transform: translateY(-100%);
  68. }