js判斷css動畫效果是否結束

<!-- css樣式 -->
<style>
    .test{
        width: 100px;
        height: 100px;
        transition: all 5s;
        background: yellowgreen;
    }
    .test1 {
        width: 500px;
    }
</style>
    <!-- html結構 -->
    <div  id="el" class="test">

    </div>

<script>
    let el = document.getElementById("el");
    el.addEventListener("click",function(){
        // 注意class名稱前面要加上一個空格
        // 間接學習了JS給元素添加class樣式的方法有木有
        el.className += ' test1'
        // console.log(el.className)
    })
    el.addEventListener('transitionend',function(){
        console.log('css動畫結束')
        // todo
    })
</script>