IFBAEMIN - 05

1. extends HTMLElement with click

음.. 요기서 시간을 엄청 먹을줄은 몰랐는데.. custom element 에서, addeventlisener을 넣는데 자꾸 parameter 2에 대한 에러가 계속 떴다. 그래서 지금 내가 사용하고 있는 extends HTMLElement에 다른 적용법이 있나 검색하다가 connetedcallback에 onclick을 넣은 예제를 발견했다.

export default class Login extends HTMLElement {
    connectedCallback() {
        this.innerHTML = `
        <div class = "remove">
        </div>
        `;
        this.querySelector('.remove').onclick = e => this.classList.toggle('closed');
    }
}

customElements.define('login-container', Login);

기억해뒀다 또 써봐야겠다. 

2. visibility hidden

modal-wrap에 login-container가 우측에서 좌측으로 서서히 나오는 것을 구현하려고 했다. 단순히 display:none에서, display:block으로 바꾸는 것은 transition이 일어나지 않기에(그렇다고 time에 관련된걸 넣기엔 너무나 비효율적이다) visibility hidden을 넣고, width: 0 -> width:100%로 변하게 closed class를 toggle 시켰다. 이때 width의 변화로 transition을 뒀더니 문제점은. login-container의 child 들이 짜부려졌다가 나오는 문제가 있었다. 그래서 width보다는, app-container의 style에 overflow-hidden을 넣고, right: 100%와 같이 position의 값을 변화시켰더니 문제 끝!

요약 : display:none말고, 

       visibility: hidden right:-100% -> right:0;으로 바꾸자