_transitions.scss 1.6 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182
  1. // _ _ _ _
  2. // | |_ _ _ __ _ _ _ __(_) |_(_)___ _ _ ___
  3. // | _| '_/ _` | ' \(_-< | _| / _ \ ' \(_-<
  4. // \__|_| \__,_|_||_/__/_|\__|_\___/_||_/__/
  5. @mixin accordeon-transition($h){
  6. &.accordeon-enter,
  7. &.accordeon-leave-to{
  8. // opacity: 0;
  9. height:0.01vh;
  10. padding-top: 0;
  11. padding-bottom: 0;
  12. // transform: translateY(100%);
  13. // transform: translate3d(0, 100%, 0);
  14. }
  15. &.accordeon-enter-to,
  16. &.accordeon-leave{
  17. // opacity:1;
  18. height:$h;
  19. // transform: translateY(0%);
  20. // transform: translate3d(0, 0, 0);
  21. }
  22. &.accordeon-enter-active{
  23. transition: all 300ms ease-in-out;
  24. }
  25. &.accordeon-leave-active{
  26. transition: all 200ms ease-in-out;
  27. }
  28. }
  29. @mixin fade-transition() {
  30. &.fade-enter,
  31. &.fade-leave-to{
  32. opacity: 0;
  33. }
  34. &.fade-enter-to,
  35. &.fade-leave{
  36. opacity:1;
  37. }
  38. &.fade-enter-active{
  39. transition: all 300ms ease-in-out;
  40. }
  41. &.fade-leave-active{
  42. transition: all 200ms ease-in-out;
  43. }
  44. }
  45. // .fade-enter,
  46. // .fade-leave-to{
  47. // opacity: 0;
  48. // }
  49. // .fade-enter-to,
  50. // .fade-leave{
  51. // opacity:1;
  52. // }
  53. .fade-enter-active{
  54. transition: all 300ms ease-in-out;
  55. }
  56. .fade-leave-active{
  57. transition: all 200ms ease-in-out;
  58. }
  59. // .fade-enter-active,
  60. // .fade-leave-active {
  61. // transition-duration: 0.3s;
  62. // transition-property: opacity;
  63. // transition-timing-function: ease;
  64. // }
  65. .fade-enter,
  66. .fade-leave-active {
  67. opacity: 0
  68. }
  69. // .edition-texts-enter-active, .edition-texts-leave-active {
  70. // transition: all 1s;
  71. // }
  72. // .edition-texts-enter, .edition-texts-leave-to /* .list-leave-active below version 2.1.8 */ {
  73. // max-height: 0;
  74. // // transform: translateY(30px);
  75. // }