如何消除较大对话框上的闪烁？

/* 示例代码 */
.dialog-box {
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

.dialog-box.show {
  opacity: 1;
}

// 示例代码
function showDialog() {
  const dialog = document.querySelector('.dialog-box');
  dialog.classList.add('show');
}

function hideDialog() {
  const dialog = document.querySelector('.dialog-box');
  dialog.classList.remove('show');
}

// React示例代码
import React, { useState } from 'react';

function DialogBox() {
  const [isVisible, setIsVisible] = useState(false);

  return (
    <div>
      <button onClick={() => setIsVisible(true)}>Show Dialog</button>
      {isVisible && (
        <div className="dialog-box">
          This is a dialog box.
        </div>
      )}
    </div>
  );
}

/* 示例代码 */
.dialog-box {
  transform: translateZ(0);
}