如何将淡入淡出添加到内部HTML？

<div class="fade-in-out">这是一个需要淡入淡出的元素</div>

.fade-in-out {
  opacity: 0; /* 初始时设置透明度为0，元素隐藏 */
  transition: opacity 1s; /* 使用过渡效果，过渡时间为1秒 */
}

.fade-in-out.fade-in {
  opacity: 1; /* 添加.fade-in类时，将透明度设置为1，元素显示 */
}

@keyframes fade {
  from {
    opacity: 0; /* 关键帧动画，从透明度0开始 */
  }
  to {
    opacity: 1; /* 关键帧动画，逐渐增加透明度到1 */
  }
}

const element = document.querySelector('.fade-in-out');

element.addEventListener('click', () => {
  element.classList.add('fade-in'); // 添加.fade-in类，触发淡入效果
});

element.addEventListener('transitionend', () => {
  element.classList.remove('fade-in'); // 过渡效果结束后，移除.fade-in类，恢复初始状态
});