css 트랜지션 - window minimize, maximize

window 추가하기

<div class="window">
	<div class="title-bar">
    	<div class="buttons">
        	<div class="close"></div>
                <div class="minimize"></div>
                <div class="zoom"></div>
            </div>
            <div class="title">Window Title</div>
        </div>
        <div class="content">
            Window Content
        </div>
    </div>
</div>

css 스타일 추가하기

.window {
	width: 300px;
    height: 300px;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 6;
    transition: 
    	transform 1s ease-in-out, 
    	opacity 1s ease-in-out,
    	right 1s ease-in-out,
    	bottom 1s ease-in-out;
}
.window.minimized {
	opacity: 0 !important;
    z-index: 2;
}
.window.minimized.hidden {
	display: none;
}

• 움직이면서 투명해져야하고 우측 하단에 있는 floating메뉴 뒤로 숨어야 하기때문에 transition 속성에 transform, opacity, right, bottom 을 준다.

javascript 코드 추가하기

const minimizeButton = $('.minimize');
const photoContainer = $('.photo-container');
const myWindow = $('.window');

minimizeButton.on('click', function(e) {
 	if (!myWindow.hasClass('minimized')) {
		const chatbotRect = photoContainer[0].getBoundingClientRect();
        const containerRect = myWindow[0].getBoundingClientRect();
            
        const translateX = chatbotRect.right - containerRect.right - 20;
        const translateY = chatbotRect.bottom - containerRect.bottom - 40;
            
        myWindow.css('display', 'block');
        myWindow.css('transform', `translate(${translateX}px, ${translateY}px) scale(0.1)`);
        myWindow.css('right', '20px');
        myWindow.css('bottom', '98px');
    }
            
    myWindow.addClass('minimized');

    setTimeout(() => {
    	myWindow.addClass('hidden');
    }, 100);
});

photoContainer.on('click', function(e) {
	myWindow.css('transform', 'translate(-50%, -50%)');
    myWindow.css('right', 'unset');
    myWindow.css('bottom', 'unset');

    myWindow.removeClass('minimized');

    setTimeout(() => {
    	myWindow.removeClass('hidden');
    }, 100);
});

• 반응형이기때문에 window와 우측 하단의 floating메뉴 사이의 거리를 구해야 한다. 어떤 화면에서든 floating메뉴 쪽으로 샥~ 숨어야 한다.
• getBoundingClientRect()를 사용해서 window와 floating메뉴의 right, bottom 값을 각각 구하고 움직여야 할 translateX값과 translateY값을 구한다.
• translateX값과 translateY값을 transform값에 설정한 후 myWindow.addClass('minimized')하면!! 스르륵 하면서 minimize가 된다.
• 다시 maximize하고싶으면 window를 화면 중앙에 보여줘야 하니까 translate(-50%, -50%)를 주면서 right, bottom 값을 unset으로 주면 다시 maximize가 된다.