Tailwind duration动画回调添加及this指向问题求助

先修正代码基础错误 #

你当前代码存在几个笔误，是触发Cannot read properties of undefined报错的直接原因：

1. export cost 拼写错误，应为 export const
2. init 方法中将DOM元素存在 _.msgDiv，但 flashMessage 里调用的是 _.myDiv，变量名不统一
3. 调用 _.flashMessage(flashMessage) 时，flashMessage 未定义，需传入实际回调函数

修复后的完整实现代码 #

以下代码同时解决「回调时机错误」和「上下文丢失」问题，实现DIV先淡入、完成后立即淡出的效果：

HTML 代码 #

<div class="duration-500 opacity-0 transition-opacity" id="myDiv">
    My DIV
</div>

注：添加transition-opacity明确指定过渡属性，避免和其他过渡效果冲突

JavaScript 代码 #

export const myDiv = {
    myDiv: null,

    init: function() {
        const _ = this;
        _.myDiv = document.getElementById('myDiv');
        // 初始化触发完整的淡入+淡出流程
        _.flashMessage(() => {
            // 淡入完成后立即执行淡出
            _.myDiv.classList.add('opacity-0');
        });
    },

    flashMessage(callback = false) {
        const _ = this;
        // 移除opacity-0，触发淡入动画
        _.myDiv.classList.remove('opacity-0');

        // 监听过渡结束事件，确保只执行一次
        const handleTransitionEnd = function(e) {
            // 仅监听opacity属性的过渡完成事件，排除其他属性干扰
            if (e.propertyName === 'opacity') {
                _.myDiv.removeEventListener('transitionend', handleTransitionEnd);
                if (callback) {
                    callback();
                }
            }
        };

        _.myDiv.addEventListener('transitionend', handleTransitionEnd);
    }
}

myDiv.init();

问题细节说明 #

1. 回调时机问题：
   直接切换类后执行回调会跳过动画等待时间，通过监听transitionend事件，能精准捕捉淡入动画（opacity从0到1）完成的时刻，此时再触发淡出操作。判断e.propertyName === 'opacity'是为了避免元素其他过渡属性（如宽高变化）触发事件干扰。

2. 上下文undefined问题：

   • 先统一了变量名，确保_.myDiv在整个对象内可正常访问
   • 普通回调函数执行时this会指向DOM元素而非myDiv对象，通过在flashMessage中保存const _ = this，在事件处理和回调中用_访问对象属性，避免上下文丢失；也可直接用箭头函数作为事件处理函数，箭头函数会继承外层的this。

内容的提问来源于stack exchange，提问作者BobbyP