Javascript 盒阴影转换错误

我偶然发现了一个奇怪的bug，对此我有一个解决方法，但我想看看，是否有人知道这是否确实是一个bug，或者我在这里遗漏了一些明显的东西

我有一个div，具有以下css：

notification.brand-notification .inner-notification-box {
    position: absolute;
    z-index: 10002;
    max-height: 100%;
    display: flex;
    flex-flow: column;
    align-items: stretch;
    padding: 2vw;
    bottom: -100%;
    opacity: 0;
    box-shadow: 0px 0px 0px rgba(0, 0, 0, 0);
    transition: all 0.3s;
    transition-timing-function: ease-in-out;
}


notification.brand-notification.active .inner-notification-box {
    bottom: 0px;
    opacity: 1;
    box-shadow: 0px 0px 0px rgba(0, 0, 0, 0);
}

打开

内部通知框

div时，通过将

活动

类添加到

通知.brand通知

，一切正常

关闭div时，我尝试添加一个javascript事件回调，该回调将在动画完成后清理HTML代码，并编写以下javascript代码：

this.innerbox.one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend',   
        function(e) {
            console.log(e.originalEvent.propertyName);
            if (destroy == true) {
                selfRef.dom.remove();
            } else selfRef.dom.removeClass('hiding');
        });

发生在我身上的奇怪事情是，这个javascript事件为两个不同的css属性触发了两次。它触发的属性之一是

bottom

属性，但它首先触发

box shadow

属性，该属性甚至没有在此div中设置

我还尝试显式地将

box shadow

属性设置为两种状态下的相同值，但在动画开始后，事件仍然会立即激发到一个甚至没有设置的

box shadow

属性

---

我正在Firefox 70.0.1中测试这一点。有人知道浏览器为什么会这样吗？这是Firefox的bug吗？我遗漏了什么吗？

请提供一份适当的、有效的报告，以便我们可以查看问题。请提供一份适当的、有效的报告，以便我们可以查看问题。