feat: add animation toggle icon

This commit is contained in:
unknown 2021-08-31 15:36:55 +07:00
parent 08cbc248d4
commit e21853ea4e
2 changed files with 30 additions and 3 deletions

View File

@ -12,6 +12,14 @@
.contentContainer{ .contentContainer{
@apply block; @apply block;
} }
.toggle{
&:before {
transform: rotate(180deg);
}
&:after {
transform: rotate(180deg);
}
}
} }
svg:hover{ svg:hover{
cursor: pointer; cursor: pointer;
@ -22,6 +30,25 @@
font-size: 3.2rem; font-size: 3.2rem;
line-height: 4rem; line-height: 4rem;
letter-spacing: -0.01em; letter-spacing: -0.01em;
.toggle{
height: 2.2rem;
width: 2.2rem;
position: relative;
&:before,
&:after{
@apply absolute h-2;
content: "";
border-radius: 0.8rem;
background: var(--text-active);
top: 40%;
width: 2.2rem;
transition: transform 500ms ease;
}
&:before{
transform-origin: center;
transform: rotate(90deg);
}
}
} }
.contentContainer{ .contentContainer{
@apply hidden pb-16; @apply hidden pb-16;

View File

@ -1,7 +1,6 @@
import s from './CollapseCommon.module.scss' import s from './CollapseCommon.module.scss'
import { useState } from 'react' import { useState } from 'react'
import classNames from 'classnames' import classNames from 'classnames'
import { IconPlus, IconMinus } from 'src/components/icons'
import CollapseContent from './CollapseContent/CollapseContent' import CollapseContent from './CollapseContent/CollapseContent'
interface CollapseProps{ interface CollapseProps{
@ -23,7 +22,8 @@ const CollapseCommon = ({title, content, isToggle}: CollapseProps) => {
onClick = { handleToggle } onClick = { handleToggle }
> >
<div className={s.title}> <div className={s.title}>
{title}{isActive ? <IconMinus /> : <IconPlus />} <a>{title}</a>
<div className={s.toggle}></div>
</div> </div>
<div className={s.contentContainer}> <div className={s.contentContainer}>
{ {