ADOFAIEditorForum/ComponentTest
2
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add Reduce Animation Setting

Browse Source
This commit is contained in:
copecone committed 2026-04-02 14:54:57 +09:00
1 parent 9043aa0535
commit 4974a699dc
15 files changed
+125 -103
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/app/components/dropdown/dropdown.scss
+20 -24
View File
@@ -2,40 +2,36 @@
@use "sass:color";
@use "styles/library" as library;
$dropdown_bg: oklch(1 0 0); // #FFFFFF
$dropdown_border_color: oklch(0 0 0 / 20%);
$dropdown_hover: oklch(0.9702 0 0); // #F5F5F5
$default_bg: oklch(1 0 0); // #FFFFFF
$border_color: oklch(0 0 0 / 20%);
$hover_bg: oklch(0.9702 0 0); // #F5F5F5
$dropdown_height: 40px;
$dropdown_border_radius: 8px;
$height: 40px;
$border_radius: 8px;
$dropdown_animation_timing: cubic-bezier(0.4, 0, 0.2, 1);
$dropdown_animation_duration: 0.2s;
$animation_timing: cubic-bezier(0.4, 0, 0.2, 1);
$default_animation_duration: 0.2s;
:host {
display: inline-block;
position: relative;
--animation-duration: calc(#{$default_animation_duration} * var(--motion-duration-multiplier));
padding: 0; margin: 0;
background-color: $dropdown_bg;
border-radius: $dropdown_border_radius;
box-shadow: 0 0 0 1px $dropdown_border_color inset;
background-color: $default_bg;
border-radius: $border_radius;
box-shadow: 0 0 0 1px $border_color inset;
cursor: pointer;
max-width: 100%;
--dropdown-duration: #{$dropdown_animation_duration};
&.reduce-motion {
--dropdown-duration: 0s;
}
}
.dropdown-box {
display: flex;
align-items: center;
padding: 0 10px;
height: $dropdown_height;
height: $height;
box-sizing: border-box;
gap: 8px;
@@ -60,7 +56,7 @@ $dropdown_animation_duration: 0.2s;
.chevron {
width: 24px; height: 24px;
flex-shrink: 0;
transition: transform var(--dropdown-duration) $dropdown_animation_timing;
transition: transform var(--dropdown-duration) $animation_timing;
user-select: none;
&.open {
@@ -77,20 +73,20 @@ $dropdown_animation_duration: 0.2s;
padding: 0;
margin: 0;
list-style: none;
background-color: $dropdown_bg;
border-radius: $dropdown_border_radius;
background-color: $default_bg;
border-radius: $border_radius;
z-index: 1000;
max-height: 240px;
overflow-y: auto;
box-shadow: 0 4px 12px oklch(0 0 0 / 10%); // rgba(0, 0, 0, 0.1)
animation: slideIn var(--dropdown-duration) $dropdown_animation_timing;
animation: slideIn var(--animation-duration) $animation_timing;
&::after {
content: "";
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
border-radius: $dropdown_border_radius;
box-shadow: 0 0 0 1px $dropdown_border_color inset;
border-radius: $border_radius;
box-shadow: 0 0 0 1px $border_color inset;
pointer-events: none;
z-index: 1001;
}
@@ -108,10 +104,10 @@ $dropdown_animation_duration: 0.2s;
padding: 0 16px;
position: relative;
align-content: center;
transition: background-color var(--dropdown-duration) $dropdown_animation_timing;
transition: background-color var(--animation-duration) $animation_timing;
&:hover, &.focused {
background-color: $dropdown_hover;
background-color: $hover_bg;
}
&.selected {
src/app/components/dropdown/dropdown.ts
-7
View File
@@ -22,7 +22,6 @@ export interface DropdownOption {
"isOpen() && focusedIndex() >= 0 ? dropdownId + '-option-' + focusedIndex() : null",
'[attr.aria-label]': 'ariaLabel()',
'[class.open]': 'isOpen()',
'[class.reduce-motion]': 'reduceMotion()',
tabindex: '0',
'(click)': 'toggle()',
'(keydown.enter)': 'onEnter($event)',
@@ -47,12 +46,6 @@ export class Dropdown implements OnInit {
private static nextId = 0;
dropdownId = `dropdown-${Dropdown.nextId++}`;
reduceMotion = input<boolean>(
typeof window !== 'undefined'
? window.matchMedia('(prefers-reduced-motion: reduce)').matches
: false,
);
constructor(private el: ElementRef) {}
ngOnInit() {