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>