Akkordeons weicher aufklappen, starken Hover entfernen
Die Klappelemente sprangen auf und zu: x-show gibt dem Element sofort die volle Hoehe und blendet nur den Inhalt ein. Ersetzt durch eine Animation von grid-template-rows 0fr → 1fr ueber 500 ms mit cubic-bezier(0.33, 1, 0.68, 1), die die tatsaechliche Hoehe bewegt – ohne das Alpine-Collapse-Plugin, das in diesem Projekt nicht registriert ist. - Der zugeklappte Zustand steht auch statisch im class-Attribut, damit vor dem Start von Alpine nichts aufgeklappt aufblitzt. - aria-hidden haengt am Zustand, weil der Inhalt jetzt dauerhaft im DOM steht. - Hover: die Flaechenaufhellung (hover:bg-muted/30) ist raus, geblieben ist ein feiner Farbwechsel der Ueberschrift. Im FAQ entfaellt zusaetzlich der Hintergrundwechsel am Icon-Kreis. - Der Pfeil dreht in derselben Dauer und Kurve wie das Aufklappen. Betrifft beide Akkordeons – die Vertiefungen der Markenseiten und das FAQ. Tests: 861 gruen (3189 Assertions), Pint sauber, npm run build:b2in gebaut. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
parent
a52347845e
commit
f971f416db
5 changed files with 115 additions and 54 deletions
|
|
@ -25,34 +25,39 @@
|
|||
<dt>
|
||||
<button
|
||||
@click="openIndex = openIndex === {{ $index }} ? null : {{ $index }}"
|
||||
class="flex w-full items-center justify-between p-6 text-left hover:bg-muted/30 transition-colors duration-200"
|
||||
class="group flex w-full items-center justify-between p-6 text-left cursor-pointer"
|
||||
:aria-expanded="openIndex === {{ $index }}"
|
||||
>
|
||||
<span class="text-lg font-medium text-foreground pr-6">
|
||||
<span class="text-lg font-medium text-foreground pr-6 transition-colors duration-300 group-hover:text-secondary">
|
||||
{{ $faq['question'] }}
|
||||
</span>
|
||||
<span class="flex-shrink-0 ml-6 flex h-8 w-8 items-center justify-center rounded-full bg-secondary/10 transition-all duration-200"
|
||||
:class="openIndex === {{ $index }} ? 'bg-secondary text-white' : 'text-secondary hover:bg-secondary/20'">
|
||||
<svg class="w-5 h-5 transition-transform duration-200"
|
||||
:class="openIndex === {{ $index }} ? 'rotate-180' : ''"
|
||||
<span class="flex-shrink-0 ml-6 flex h-8 w-8 items-center justify-center rounded-full bg-secondary/10 transition-colors duration-300"
|
||||
:class="openIndex === {{ $index }} ? 'bg-secondary text-white' : 'text-secondary'">
|
||||
<svg class="w-5 h-5 transition-transform duration-500 ease-[cubic-bezier(0.33,1,0.68,1)]"
|
||||
:class="{ 'rotate-180': openIndex === {{ $index }} }"
|
||||
fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
</dt>
|
||||
<dd x-show="openIndex === {{ $index }}"
|
||||
x-transition:enter="transition ease-out duration-200"
|
||||
x-transition:enter-start="opacity-0 transform -translate-y-2"
|
||||
x-transition:enter-end="opacity-100 transform translate-y-0"
|
||||
x-transition:leave="transition ease-in duration-150"
|
||||
x-transition:leave-start="opacity-100 transform translate-y-0"
|
||||
x-transition:leave-end="opacity-0 transform -translate-y-2"
|
||||
class="px-6 pb-6">
|
||||
<div class="border-t border-border pt-4">
|
||||
<p class="text-muted-foreground leading-relaxed">
|
||||
{{ $faq['answer'] }}
|
||||
</p>
|
||||
{{-- grid-template-rows 0fr → 1fr animiert die tatsaechliche Hoehe. Der
|
||||
zugeklappte Zustand steht auch statisch im class-Attribut, damit vor
|
||||
dem Start von Alpine nichts aufgeklappt aufblitzt. --}}
|
||||
<dd class="grid grid-rows-[0fr] opacity-0 transition-all duration-500 ease-[cubic-bezier(0.33,1,0.68,1)]"
|
||||
:class="{
|
||||
'grid-rows-[1fr] opacity-100': openIndex === {{ $index }},
|
||||
'grid-rows-[0fr] opacity-0': openIndex !== {{ $index }},
|
||||
}"
|
||||
:aria-hidden="(openIndex !== {{ $index }}).toString()">
|
||||
<div class="overflow-hidden">
|
||||
<div class="px-6 pb-6">
|
||||
<div class="border-t border-border pt-4">
|
||||
<p class="text-muted-foreground leading-relaxed">
|
||||
{{ $faq['answer'] }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</dd>
|
||||
</div>
|
||||
|
|
@ -80,34 +85,39 @@
|
|||
<dt>
|
||||
<button
|
||||
@click="openIndex = openIndex === {{ $index }} ? null : {{ $index }}"
|
||||
class="flex w-full items-center justify-between p-6 text-left hover:bg-muted/30 transition-colors duration-200"
|
||||
class="group flex w-full items-center justify-between p-6 text-left cursor-pointer"
|
||||
:aria-expanded="openIndex === {{ $index }}"
|
||||
>
|
||||
<span class="text-lg font-medium text-foreground pr-6">
|
||||
<span class="text-lg font-medium text-foreground pr-6 transition-colors duration-300 group-hover:text-secondary">
|
||||
{{ $faq['question'] }}
|
||||
</span>
|
||||
<span class="flex-shrink-0 ml-6 flex h-8 w-8 items-center justify-center rounded-full bg-secondary/10 transition-all duration-200"
|
||||
:class="openIndex === {{ $index }} ? 'bg-secondary text-white' : 'text-secondary hover:bg-secondary/20'">
|
||||
<svg class="w-5 h-5 transition-transform duration-200"
|
||||
:class="openIndex === {{ $index }} ? 'rotate-180' : ''"
|
||||
<span class="flex-shrink-0 ml-6 flex h-8 w-8 items-center justify-center rounded-full bg-secondary/10 transition-colors duration-300"
|
||||
:class="openIndex === {{ $index }} ? 'bg-secondary text-white' : 'text-secondary'">
|
||||
<svg class="w-5 h-5 transition-transform duration-500 ease-[cubic-bezier(0.33,1,0.68,1)]"
|
||||
:class="{ 'rotate-180': openIndex === {{ $index }} }"
|
||||
fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
</dt>
|
||||
<dd x-show="openIndex === {{ $index }}"
|
||||
x-transition:enter="transition ease-out duration-200"
|
||||
x-transition:enter-start="opacity-0 transform -translate-y-2"
|
||||
x-transition:enter-end="opacity-100 transform translate-y-0"
|
||||
x-transition:leave="transition ease-in duration-150"
|
||||
x-transition:leave-start="opacity-100 transform translate-y-0"
|
||||
x-transition:leave-end="opacity-0 transform -translate-y-2"
|
||||
class="px-6 pb-6">
|
||||
<div class="border-t border-border pt-4">
|
||||
<p class="text-muted-foreground leading-relaxed">
|
||||
{{ $faq['answer'] }}
|
||||
</p>
|
||||
{{-- grid-template-rows 0fr → 1fr animiert die tatsaechliche Hoehe. Der
|
||||
zugeklappte Zustand steht auch statisch im class-Attribut, damit vor
|
||||
dem Start von Alpine nichts aufgeklappt aufblitzt. --}}
|
||||
<dd class="grid grid-rows-[0fr] opacity-0 transition-all duration-500 ease-[cubic-bezier(0.33,1,0.68,1)]"
|
||||
:class="{
|
||||
'grid-rows-[1fr] opacity-100': openIndex === {{ $index }},
|
||||
'grid-rows-[0fr] opacity-0': openIndex !== {{ $index }},
|
||||
}"
|
||||
:aria-hidden="(openIndex !== {{ $index }}).toString()">
|
||||
<div class="overflow-hidden">
|
||||
<div class="px-6 pb-6">
|
||||
<div class="border-t border-border pt-4">
|
||||
<p class="text-muted-foreground leading-relaxed">
|
||||
{{ $faq['answer'] }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</dd>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue