transitions.css 1.3 KB

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