하아.. 이걸 이제서야 깨닫다니..

css transition 속성은 다른 속성이랑 같이 사용되는 현상이 발생해서 편법을 사용하거나 기능을 포기하곤 했는데 animation 속성은 충돌이 일어나지 않고 따로 애니메이션이 적용되는는군..
진작에 방법을 좀 바꿔볼껄 ㅠ

source

@keyframes dropdown {
  from {
    opacity: 0;
    transform: translateY(5px);
  }
  to {
    opacity: 1;
  }
}

이렇게 평범하게 키프레임을 만들어두고

li {
  > div {
    display: none;
  }
  &:hover {
    > div {
      display: block;
      > ol {
        animation-name: dropdown;
        animation-duration: 500ms;
        animation-direction: normal;
      }
    }
  }
}

드롭다운 자식을 감싸는 엘리먼트는 display속성을 토글링 할 수 있도록 두고, 롤오버시 자식 엘리먼트에 animation속성을 넣어서 실행되도록 둔다.

demo

1개의 댓글