단계별 가이드 - 애니메이션으로 입력

HTML

HTML의 경우 "edit"svg가 있는 입력 및 버튼이 있는 컨테이너가 필요합니다.

버튼을 클릭하면 토글이 트리거됩니다.

<div class="container">
    <input type="text" class="input">
    <button onclick="toggle()" class="edit">
        <svg
            xmlns="http://www.w3.org/2000/svg"
            height="15"
            fill="none"
            viewBox="0 0 24 24"
            stroke="#02a8f4"
            stroke-width="2">
            <path
                stroke-linecap="round"
                stroke-linejoin="round"
                d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" />
        </svg>
    </button>
</div>

자바스크립트

자바스크립트의 경우 버튼 상태(편집 모드 여부)를 저장하는 변수가 있고 토글 기능을 생성합니다.

먼저 모든 요소(버튼, 입력 및 컨테이너)를 선택하고 편집 모드를 이전과 반대로 설정합니다(edit = !edit).

이제 편집이 참이면 버튼의 svg를 체크 아이콘으로 변경하고 입력에 집중하고 "활성"클래스를 설정하고 컨테이너의 테두리 색상을 밝은 녹색으로 변경합니다.

편집이 거짓이면 버튼의 svg를 다시 편집 아이콘으로 설정하고 "활성"클래스를 제거하고 컨테이너의 배경색을 다시 파란색으로 설정합니다.

let edit = false

function toggle() {
    let btn = document.getElementsByClassName('edit')[0]
    let input = document.getElementsByClassName('input')[0]
    let container = document.getElementsByClassName('container')[0]

    edit = !edit

    if (edit) {
        btn.innerHTML = `
            <svg xmlns="http://www.w3.org/2000/svg" height="15" fill="none" viewBox="0 0 24 24" stroke="#32ffcc" stroke-width="2">
                <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
                </svg>`
        input.focus()
        input.classList.add('active')
        container.style.borderColor = '#32ffcc'
    } else {
        btn.innerHTML = `
            <svg xmlns="http://www.w3.org/2000/svg" height="15" fill="none" viewBox="0 0 24 24" stroke="#02a8f4" stroke-width="2">
                <path stroke-linecap="round" stroke-linejoin="round" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" />
            </svg>`
        input.classList.remove('active')
        container.style.borderColor = '#02a8f4'
    }
}

CSS

CSS의 경우 먼저 컨테이너의 스타일을 지정합니다. 테두리는 반지름이 15픽셀인 파란색으로 설정합니다.

그런 다음 flexbox를 사용하여 내부 요소를 정렬하고 일부 패딩을 추가합니다.

.container {
    border: 1px solid #02a8f4;
    display: flex;
    border-radius: 15px;
    padding: 5px;
}

버튼의 경우 패딩을 0으로 설정하고 테두리 속성을 없음으로 설정하여 기본 테두리를 제거합니다.

또한 기본 배경색을 제거하고 투명하게 설정합니다.

이제 커서를 포인터로 설정하고 flexbox를 사용하여 버튼 중앙에 svg를 표시합니다.

button {
    padding: 0;
    border: none;
    background-color: transparent;
    cursor: pointer;
    display: flex;
    justify-content: center;
}

이제 입력 스타일을 지정합니다. 패딩과 너비를 0으로 설정합니다. 이것이 비활성 버튼 스타일입니다.

배경 속성을 투명으로 설정하고 기본 테두리를 제거하고 반경 15픽셀로 설정합니다.

또한 외곽선을 제거하고 약간의 전환을 추가해 보겠습니다.

.input {
    padding: 0;
    width: 0;
    background-color: transparent;
    border: none;
    border-radius: 15px;
    outline: none;
    transition: 0.5s;
}

이제 "활성"클래스입니다. 이 클래스는 버튼이 활성화되면 입력 요소에 추가됩니다.

너비를 100px로 설정하고(이 값을 0으로 설정하기 전에 기억하세요) 일부 X 패딩과 오른쪽 여백(입력과 svg 사이에 약간의 공간)을 추가합니다.

그리고 우리는 약간의 전환을 추가할 것입니다.

.active {
    width: 100px;
    padding: 0 5px;
    margin-right: 5px;
    transition: 0.5s;
}

그리고 그게 다야.

비디오 자습서 및 전체 코드here를 찾을 수 있습니다.

읽어주셔서 감사합니다. ❤️