Просмотр исходного кода

Adjust dropdown checkmark animation

Makes the animation direction reversed between showing and hiding the
checkmark symbol in the dropdown with multiple selection component.
It now comes from left to right when it appears and from right to left
when it disappears.
Sergiu Miclea 8 лет назад
Родитель
Сommit
543ef1c79a
1 измененных файлов с 3 добавлено и 3 удалено
  1. 3 3
      src/components/molecules/Dropdown/index.jsx

+ 3 - 3
src/components/molecules/Dropdown/index.jsx

@@ -83,17 +83,17 @@ const Checkmark = styled.div`
   #symbol {
     transition: stroke ${StyleProps.animations.swift};
     stroke-dasharray: 12;
-    stroke-dashoffset: ${props => props.show ? 0 : 12};
+    stroke-dashoffset: ${props => props.show ? 24 : 12};
     animation-duration: 100ms;
     animation-timing-function: ease-in-out;
     animation-fill-mode: forwards;
 
     @keyframes dashOn {
       from { stroke-dashoffset: 12; }
-      to { stroke-dashoffset: 0; }
+      to { stroke-dashoffset: 24; }
     }
     @keyframes dashOff {
-      from { stroke-dashoffset: 0; }
+      from { stroke-dashoffset: 24; }
       to { stroke-dashoffset: 12; }
     }
   }