transitionend事件为什么一定要if判断筛选一下当前事件的propertyName呢？

Question

问题概括

在做js30 - Flex Panel Gallery的练习，对于transtionend事件的发生条件不太理解，向大家请教。

相关代码

我有问题的代码如下：
js部分：

function toggleActive(e) {
      console.log(e.propertyName);//这里输出的结果有两项：flex-grow 和font-size
       if (e.propertyName.includes('flex')) {//我的问题就是上一行语句的结果不是可以说明，此处判断的条件已经成立了吗？为什么还需要这句if判断呢？
      this.classList.toggle('open-active');
      }
    }
    panels.forEach(panel => panel.addEventListener('transitionend', toggleActive));

相对应的css部分：

 transition:
        font-size 0.7s cubic-bezier(0.61,-0.19, 0.7,-0.11),
        flex 0.7s cubic-bezier(0.61,-0.19, 0.7,-0.11),
        background 0.7s;

完整的页面效果与代码请见：https://codepen.io/treebird/p...

问题描述

我的困惑就是不理解上面代码中if判断的必要性……所以删去if判断，只保留这条语句：this.classList.toggle('open-active');结果页面中没能实现原来的效果。
我感觉可能是出在我对transtionend发生条件的理解错误？
MDN上说transitionend事件会在 CSS transition结束后触发，我的理解是当监听到该事件时，就说明panel上发生该transitionend事件了，而且console输出的结果也确认了当前属性名包含flex，那么不能直接执行添加class的操作吗？
希望大家可以帮忙解惑一下。
还有一个问题，此处为了达成该监听事件的效果，除了用if语句判断，还有别的实现方式吗？

问题解决

刚刚终于搜到答案了，就是因为有“ flex-grow 和 font-size 两个 transitionend 事件， 所以toggle() 被运行了两次，所以字又藏了回去。因此只要写个判断式让触法一次即可。”出自https://www.dazhuanlan.com/an...