210907 헤더영역 애니메이션

버튼을 눌렀을 때 나오는 header background-image가 실행되는 애니메이션이 scale이라고 생각해서 이렇게 코드를 작성했는데 실행이 안된다

애니메이션효과 참고

내가 작성한 코드 (오답)

/* scss 형식 */
.pre {
    @include button;
    left: 20px;
    opacity: 0;

    &:active {
        .headers {
            animation: scale 0.6s cubic-bezier(0.645, 0.045, 0.355, 1) forwards;
        }
    }
}

애니메이션 트리거

그래서 종택님께 조언을 구했는데
css 애니메이션 효과를 배경이미지가 변경될 때마다 주기 원하기 때문에
일단 css 애니메이션의 트리거를 어떻게 줘야할지 알아야 한다는 내용이었다

이 사이트의 내용을 참고하자면

1. CSS 애니메이션 은 웹 요소가 하나의 CSS 스타일 구성에서 → 다른 구성으로 전환하는 트랜지션을 지원한다
2. 브라우저는 로드 시 정의된 애니메이션을 시작할 수 있다
3. CSS 애니메이션을 트리거 한 이벤트는 클래스 추가 및 제거에 의존한다
4. AMP는 두 가지 애니메이션 유형을 모두 지원한다

AMP란?

• Accelerated Mobile Pages의 약자
• Google에서 시작한 프로젝트로 모바일전용 빠른 웹페이지를 의미한다
• 요즘은 하나의 웹사이트를 만들고 미디어쿼리로 큰 해상도부터 작은 해상도까지 모두 대응한다

그래서 애니메이션효과를 가지고 있는 클래스명을 만들려고 했는데
어떻게 만들어야 되나 고민했지만, 이러한 부분은 철진님의 도움을 받았다

문제해결 과정 1

<div
className={`headers ${this.makeClass(currentSlide)}`}
style={{ backgroundImage: imgArr[currentSlide] }}
></div>

@keyframes scaleStyle {
  0% {
    transform: scale(1.2);
    opacity: 0.2;
  }

  100% {
    transform: scale(1);
    opacity: 0.7;
  }
}

/* scss형식 */
.headers {
    position: relative;
    height: 600px;
    margin-bottom: 80px;
    padding-right: 20px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.6;

    &.scaleAnimation {
      animation: scaleOne 0.6s cubic-bezier(0.645, 0.045, 0.355, 1) forwards;
    }

이렇게 하나의 애니메이션 효과를 주고 실행하려고 했으나 작동하지 않았다

그 이유는 아직 못찾았는데 찾는대로 기록할 예정이다....

문제해결 과정2

makeClass = current => {
    const obj = {
        0: 'odd',
        1: 'even',
        2: 'odd',
        3: 'even',
        4: 'odd',
        5: 'even'
    };
    return obj[current];
};

@keyframes scaleOne {
  0% {
    transform: scale(1.2);
    opacity: 0.2;
  }

  100% {
    transform: scale(1);
    opacity: 0.7;
  }
}

@keyframes scaleTwo {
  0% {
    transform: scale(1.2);
    opacity: 0.2;
  }

  100% {
    transform: scale(1);
    opacity: 0.7;
  }
}

/* scss 형식 */
.headers {
    position: relative;
    height: 600px;
    margin-bottom: 80px;
    padding-right: 20px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.6;

    &.odd {
      animation: scaleOne 0.6s cubic-bezier(0.645, 0.045, 0.355, 1) forwards;
    }

    &.even {
      animation: scaleTwo 0.6s cubic-bezier(0.645, 0.045, 0.355, 1) forwards;
    }

그래서 위의 코드들처럼
첫번째, 세번째, 다섯번째 애니메이션 이름과
두번째, 네번째, 여섯번째 애니메이션 이름을 각각 동일하게 만들어서
첫번째에서 두번째로 넘어갈 때 다른 애니메이션이 실행되도록 (사실 내용은 동일하지만 이름만 다르게 지정했다) 지정했는데 놀랍게도 실행이 되었다