Merge pull request #310 from Th1nkK1D/dropdown-chevron-transition

Update dropdown chevron transition
illright · Oct 11, 2021 · 61259cc · 61259cc
2 parents 273b369 + 846904c
commit 61259cc
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 2 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -10,6 +10,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/) and this
 
 - The [`Slider`](https://illright.github.io/attractions/docs/components/slider) component has been added, allowing you to create a slider similar to the one you would get with `<input type="range">`. It also support inputting a range by supplying a tuple for the `value` prop (Thanks to [@RikuVan](https://github.com/RikuVan) for the contribution - [#290](https://github.com/illright/attractions/pull/290)).
 
+### Changed
+
+- Change the [`Dropdown`](https://illright.github.io/attractions/docs/components/dropdown) chevron transition animation to a `scaleY(-1)` for `150ms` ([#310](https://github.com/illright/attractions/pull/310))
+
 ## [3.4.0] - 2021-09-12
 
 ### Added

diff --git a/attractions/dropdown/dropdown-shell.scss b/attractions/dropdown/dropdown-shell.scss
@@ -7,10 +7,10 @@
 
   :global .dropdown-chevron {
     margin-bottom: -0.125em;
-    transition: transform 100ms;
+    transition: transform 150ms;
   }
 
   &.open :global .dropdown-chevron {
-    transform: rotate(180deg);
+    transform: scaleY(-1);
   }
 }