export default {
    mounted(el, binding) {
        const duration = binding.arg ? parseInt(binding.arg) : 300;
        el.style.transition = `opacity ${duration}ms ease`;
        el.style.opacity = binding.value ? '1' : '0';
        if (!binding.value) el.style.display = 'none';
    },
    updated(el, binding) {
        const duration = binding.arg ? parseInt(binding.arg) : 300;

        if (binding.value) {
            el.style.display = '';
            requestAnimationFrame(() => {
                el.style.opacity = '1';
            });
        } else {
            el.style.opacity = '0';
            setTimeout(() => {
                el.style.display = 'none';
            }, duration);
        }
    }
};