10. CSS 애니메이션

Color

Conditional rendering v-if

Additional keyframe (0% 30% 100%)

Animated resize (transform)

The value of the pressed key

색깔

우리는 먼저 아이들을 위한 앱을 만들고 있습니다. 더 나은 교육 효과를 얻으려면 활성 키 모양을 더 매력적으로 만드십시오.
styles.css에서 pulse 애니메이션을 만듭니다. 그리고 background-color 를 .key.active 로 바꿉니다.

스타일.css

.key.active {
    /* background-color: red; */
    animation: pulse 1s;
    position: relative;
}

@keyframes pulse {
    0% {
        background-color: black;
    }
    100% {
        background-color: red;
    }
}

결과



이제background-color가 원활하게 변경됩니다. @keyframes 시간 경과에 따라 스타일 속성을 변경하는 방법을 설정합니다. 우리의 경우: black에서 red까지 1초입니다.
@keyframes에 크기 변경( width , height )을 추가할 수도 있습니다.

@keyframes pulse {
    0% {
        background-color: black;
        width: 100%;
        height: 100%;
    }
    100% {
        width: 150%;
        height: 150%;
        background-color: red;
    }
}

그리고 당신은 그것이 작동하지 않는다는 것을 알게 될 것입니다. Key 가 flex 컨테이너 안에 표시되기 때문입니다.

조건부 렌더링 v-if

활성 키 크기 조정 애니메이션으로 더 많은 자유를 얻으려면 이전 활성key에 대한 새로운 독립 요소가 필요합니다. 키가 활성화된 경우에만 표시됩니다.

한 요소를 다른 요소 위에 표시하려면 첫 번째 요소에는 스타일position: relative이 있어야 하고 두 번째 요소에는 스타일position: absolute이 있어야 합니다.

스타일.css

.key {
  ... position: relative;
}

.key.active {
  animation: pulse 1s;
  position: absolute;
  z-index: 2;
}

z-index:2는 요소가 z-index:1(기본값)인 요소 위에 표시됨을 의미합니다.
Key 템플릿에 조건부 렌더링 요소(활성 키)를 추가합니다.

Key.js 템플릿

<div
    :class="[
                'key', 
                keyContent.code, 
                { shiftKeyPressed: isShift && shiftKey && !isActive }
            ]"
    @click="keyClick(keyContent)"
>
    <!-- add: -->
    <div v-if="isActive" :class="['key', 'active', keyContent.code]">
        <div>{{main}}</div>
        <div>{{shifted}}</div>
    </div>
    <div class="main">{{main}}</div>
    <div class="shifted">{{shifted}}</div>
</div>

결과

추가 키프레임(0% 30% 100%)

이제 애니메이션 크기 조정이 작동합니다. 그러나 너무 느립니다. 크기 조정을 3배 빠르게 하고 컬러 펄스는 그대로 둡니다. 이를 위해서는 추가 키프레임이 필요합니다.

스타일.css

@keyframes pulse {
    0% {
        background-color: black;
        width: 100%;
        height: 100%;
    }
    /* add: */
    30% {
        width: 150%;
        height: 150%;
    }
    100% {
        background-color: red;
        width: 150%;
        height: 150%;
    }
}

결과



이제 크기 조정은 1초의 30%에서 발생하고 색상 맥동은 1초의 100%에서 발생합니다.

애니메이션 크기 조정(변환)

width/height 변경하는 대신 다른 CSS 소품transform을 사용하겠습니다.

스타일.css

.key.active {
    animation: pulse 1s;
    /* position (4 lines) : */
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;

    width: 100%;
    height: 100%;

    /* to compensate .key style: */
    padding: -0.5rem;
    margin: -0.2rem;

    /* to center content vertically and horizontally: */
    display: flex;
    align-items: center;
    justify-content: center;

    transform-origin: center;
}

@keyframes pulse {
    0% {
        background-color: black;
        transform: scale(100%);
    }
    30% {
        transform: scale(130%);
    }
    80% {
        transform: scale(130%);
    }
    100% {
        background-color: red;
        transform: scale(100%);
    }
}

결과



이제 더 좋아 보이지 않나요?

누른 키의 값

키에 main 및 shifted 2개의 값이 포함된 경우 두 값을 모두 활성화하고 싶지 않습니다. 각각 따로 소리를 낼 것이기 때문입니다.

활성 키에 대해 1개의 값만 반환하는 새computed 값을 생성해 보겠습니다.

Key.js 계산됨

value() {
    const { main, shifted, code } = this.keyContent
    return (this.shiftKey ? shifted : main) || code
}

shiftKey가 참이면 값은 shifted이고 그렇지 않으면 값은 main입니다. 값이 존재하지 않으면 code 를 반환합니다.

템플릿의 main에서 이 값shifted으로 바꿉니다.

Key.js 템플릿

<div v-if="isActive" :class="['key', 'active', keyContent.code]">
    <div>{{value}}</div>
</div>

결과



이제 활성 상자에 1개의 값만 표시되며 이는 정확합니다. 이것은 우리가 모든 키보드 기호를 울리기를 원하기 때문에 특히 중요합니다.

Diffs in code 10

Entire code after the chapter