concis/web-react/umd/packages/concis-react/src/Drawer/style/animation.d.ts

Concis Component library for PC

declare const animationStyle = "\n  .fadedrawer-enter,\n  .fadedrawer-appear {\n    opacity: 0;\n  }\n\n  .fadedrawer-enter-active,\n  .fadedrawer-appear-active {\n    opacity: 1;\n    transition: opacity 200ms;\n  }\n\n  .fadedrawer-exit {\n    opacity: 1;\n  }\n\n  .fadedrawer-exit-active {\n    opacity: 0;\n    transition: opacity 200ms;\n  }\n\n  .fadedrawer-right-content-enter,\n  .fadedrawer-right-content-appear {\n    transform: translateX(100%);\n  }\n\n  .fadedrawer-right-content-enter-active,\n  .fadedrawer-right-content-appear-active {\n    transform: translateX(0);\n    transition: transform 300ms;\n  }\n\n  .fadedrawer-right-content-exit {\n    transform: translateX(0);\n  }\n\n  .fadedrawer-right-content-exit-active {\n    transform: translateX(100%);\n    transition: transform 300ms;\n  }\n\n  .fadedrawer-left-content-enter,\n  .fadedrawer-left-content-appear {\n    transform: translateX(-100%);\n  }\n\n  .fadedrawer-left-content-enter-active,\n  .fadedrawer-left-content-appear-active {\n    transform: translateX(0);\n    transition: transform 300ms;\n  }\n\n  .fadedrawer-left-content-exit {\n    transform: translateX(0);\n  }\n\n  .fadedrawer-left-content-exit-active {\n    transform: translateX(-100%);\n    transition: transform 300ms;\n  }\n\n  .fadedrawer-top-content-enter,\n  .fadedrawer-top-content-appear {\n    transform: translateY(-100%);\n  }\n\n  .fadedrawer-top-content-enter-active,\n  .fadedrawer-top-content-appear-active {\n    transform: translateY(0);\n    transition: transform 300ms;\n  }\n\n  .fadedrawer-top-content-exit {\n    transform: translateY(0);\n  }\n\n  .fadedrawer-top-content-exit-active {\n    transform: translateY(-100%);\n    transition: transform 300ms;\n  }\n\n  .fadedrawer-bottom-content-enter,\n  .fadedrawer-bottom-content-appear {\n    transform: translateY(100%);\n  }\n\n  .fadedrawer-bottom-content-enter-active,\n  .fadedrawer-bottom-content-appear-active {\n    transform: translateY(0);\n    transition: transform 300ms;\n  }\n\n  .fadedrawer-bottom-content-exit {\n    transform: translateY(0);\n  }\n\n  .fadedrawer-bottom-content-exit-active {\n    transform: translateY(100%);\n    transition: transform 300ms;\n  }\n\n  @media screen and (max-width: 767px) {\n    .concis-drawer {\n      &-content {\n        width: 90vw;\n      }\n    }\n\n    .fadeContent-enter,\n    .fadeContent-appear {\n      top: @concis-drawer-fadeExit-transform;\n      left: @concis-drawer-fadeExit-transform;\n      width: 80vw;\n      opacity: 0;\n    }\n\n    .fadeContent-enter-active,\n    .fadeContent-appear-active {\n      top: @concis-drawer-transform;\n      left: @concis-drawer-transform;\n      width: 90vw;\n      opacity: 1;\n      transition: top 200ms, width 200ms, left 200ms, opacity 200ms;\n    }\n\n    .fadeContent-exit {\n      top: @concis-drawer-transform;\n      left: @concis-drawer-transform;\n      width: 90vw;\n      opacity: 1;\n    }\n\n    .fadeContent-exit-active {\n      top: @concis-drawer-fadeExit-transform;\n      left: @concis-drawer-fadeExit-transform;\n      width: 80vw;\n      opacity: 0;\n      transition: top 200ms, width 200ms, left 200ms, opacity 100ms;\n    }\n  }\n";
export { animationStyle };