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>