SOURCE

function handleStart () {
    const flag = document.querySelector('#flag');
    flag.style.display = 'block';
    let bottom = 0;
    const timer = setInterval(() => {
        bottom += 0.5;
        flag.style.bottom = `${bottom}px`; 
        if (bottom >= 500 - 60) {
            clearInterval(timer);
        }
    }, 10);
}

const startBtn = document.querySelector('#start');
startBtn.addEventListener('click', handleStart, false);

<h1>升旗</h1>


<div class="box">
    <div id="pole""></div>
    <div id="flag"></div>
</div>

<hr/>

<button id="start">升旗</button>

.box {
    height: 500px;
    position: relative;
}

#pole {
    width: 10px;
    height: 100%;
    background-color: black;
}

#flag {
    width: 100px;
    height: 60px;
    background-color: red;
    position: absolute;
    left: 10px;
    bottom: 0;
    display: none;
}