Головна сторінка Огляд Довідка
Реєстрація Увійти
Apq
/
semi-design
дзеркало https://github.com/DouyinFE/semi-design.git
1
0
Відгалуження 0
Файли Проблеми 0 Wiki
Гілка: test-code-coverage
Гілки Теги
semi-design
/
packages
/
semi-foundation
/
tabs
/
animation.scss

animation.scss 2.6 KB
Постійне посилання Історія Запис

123456789101112131415161718192021222324252627282930313233343536 
  1. $transition_duration-tabs_tab_line-border: var(--semi-transition_duration-faster); //线条式标签页标示线-边框-动画持续时间
    2. 

  2. $transition_function-tabs_tab_line-border: var(--semi-transition_function-easeIn); //线条式标签页标示线-边框-过渡曲线
    3. 

  3. $transition_delay-tabs_tab_line-border: var(--semi-transition_delay-fastest); //线条式标签页标示线-边框-延迟时间
    4. 

  4. 

  5. $transition_duration-tabs_tab_line-text: var(--semi-transition_duration-faster); //线条式标签页-文字-动画持续时间
    6. 

  6. $transition_function-tabs_tab_line-text: var(--semi-transition_function-easeIn); //线条式标签页-文字-过渡曲线
    7. 

  7. $transition_delay-tabs_tab_line-text: var(--semi-transition_delay-fastest); //线条式标签页-文字-延迟时间
    8. 

  8. 

  9. 

  10. $transition_duration-tabs_tab_button-bg: var(--semi-transition_duration-faster); //按钮式标签页-背景色-动画持续时间
    11. 

  11. $transition_function-tabs_tab_button-bg: var(--semi-transition_function-easeIn); //按钮式标签页-背景色-过渡曲线
    12. 

  12. $transition_delay-tabs_tab_button-bg: var(--semi-transition_delay-fastest); //按钮式标签页-背景色-延迟时间
    13. 

  13. 

  14. 

  15. $transition_duration-tabs_tab_card-bg: var(--semi-transition_duration-faster); //卡片式标签页文字-背景色-动画持续时间
    16. 

  16. $transition_function-tabs_tab_card-bg: var(--semi-transition_function-easeIn); //卡片式标签页文字-背景色-过渡曲线
    17. 

  17. $transition_delay-tabs_tab_card-bg: var(--semi-transition_delay-fastest); //卡片式标签页文字-背景色-延迟时间
    18. 

  18. 

  19. //transform token
    20. 

  20. 

  21. $transform_scale-tabs_tab_line-item: var(--semi-transform_scale-none); //线条式标签页item 放大
    22. 

  22. $transform_scale-tabs_tab_button-item: var(--semi-transform_scale-none); //按钮式标签页item 放大
    23. 

  23. $transform_scale-tabs_tab_card-item: var(--semi-transform_scale-none); //线条式标签页item 放大
    24. 

  24. 

  25. 

  26. $animation_transform_translateX-tabs_tabPanel-leftShow: 60px; //左侧展示时，tabPanel的水平偏移值
    27. 

  27. $animation_transform_translateX-tabs_tabPanel-rightShow: -60px; //右侧展示时，tabPanel的水平偏移值
    28. 

  28. 

  29. $animation_transform_translateX-tabs_tabPanel-topShow: 60px; //上侧展示时，tabPanel的垂直偏移值
    30. 

  30. $animation_transform_translateX-tabs_tabPanel-bottomShow: -60px; //下侧展示时，tabPanel的垂直偏移值
    31. 

  31. 

  32. $animation_opacity-tabs_tabPanel_show: 0; //tabPanel的动画开始时透明度
    33. 

  33. 

  34. $animation_duration-tabs_tabPanel-show: 200ms; //tabPanel的展示动画持续时间
    35. 

  35. $animation_function-tabs_tabPanel-show: ease-in-out; //tabPanel的展示动画曲线
    36. 

  36. $animation_delay-tabs_tabPanel-show: 0s; //tabPanel的展示动画延迟时间
    37.