JS溶解形式的文字切换特效

为了实现JS溶解形式的文字切换特效，我们可以使用以下步骤：

第一步：创建HTML结构

首先我们需要在HTML代码中创建一些必需的结构，包括一个包裹元素、一个用于显示文本内容的元素和若干个用于存放动画效果的元素（可以是span、div或其他包裹元素）。

<div class="wrap">
  <h1 id="text">这是一段文字</h1>
  <div id="animation">
    <span>这</span>
    <span>是</span>
    <span>一</span>
    <span>段</span>
    <span>文</span>
    <span>字</span>
  </div>
</div>

第二步：定义CSS样式

使用CSS定义动画效果，这里选择了淡入淡出和溶解两种动画效果，具体实现如下：

#animation span {
  position: absolute;
  opacity: 0;
}

#animation .fadeIn {
  opacity: 1;
  transition: opacity 1s ease-in-out;
}

#animation .fadeOut {
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

#animation .dissolve {
  opacity: 0;
  transition: opacity 1.5s ease-in-out;
  animation: dissolve 1.5s ease-in-out forwards;
}

@keyframes dissolve {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

第三步：编写JS代码

最后再编写JS代码来实现动画效果，在其中定义一个数组来存储需要切换显示的文字内容，然后使用计时器对应的setTimeout函数在不同的时间段内切换不同的文字内容，并给它们添加对应的动画效果：

const text = document.getElementById('text');
const animation = document.getElementById('animation');
const words = ['这段文字将会', '在不同的时间段', '逐渐显示出来', '效果真是太棒了'];

let count = 0;

function changeWord() {
  const currentWord = words[count];
  const characters = currentWord.split('');

  animation.innerHTML = '';

  for (let i = 0; i < characters.length; i++) {
    const span = document.createElement('span');
    span.innerHTML = characters[i];
    animation.appendChild(span);
  }

  const spans = animation.childNodes;

  for (let i = 0; i < spans.length; i++) {
    const span = spans[i];

    setTimeout(function () {
      span.classList.add('fadeIn');
      span.classList.remove('fadeOut');
    }, i * 100);
  }

  setTimeout(function () {
    for (let i = 0; i < spans.length; i++) {
      const span = spans[i];

      setTimeout(function () {
        span.classList.add('fadeOut');
        span.classList.remove('fadeIn');
      }, i * 100);
    }
  }, currentWord.length * 100);

  count++;

  if (count === words.length) {
    count = 0;
  }

  setTimeout(changeWord, currentWord.length * 100 + 1000);
}

changeWord();

这样就完成了JS溶解形式的文字切换特效的实现。以下是两个示例效果：

示例1

<div class="wrap">
  <h1 id="text">这是一段文字</h1>
  <div id="animation">
    <span>这</span>
    <span>是</span>
    <span>一</span>
    <span>段</span>
    <span>文</span>
    <span>字</span>
  </div>
</div>

<style>
#animation span {
  position: absolute;
  opacity: 0;
}

#animation .fadeIn {
  opacity: 1;
  transition: opacity 1s ease-in-out;
}

#animation .fadeOut {
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

#animation .dissolve {
  opacity: 0;
  transition: opacity 1.5s ease-in-out;
  animation: dissolve 1.5s ease-in-out forwards;
}

@keyframes dissolve {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
</style>

<script>
const text = document.getElementById('text');
const animation = document.getElementById('animation');
const words = ['这段文字将会', '在不同的时间段', '逐渐显示出来', '效果真是太棒了'];

let count = 0;

function changeWord() {
  const currentWord = words[count];
  const characters = currentWord.split('');

  animation.innerHTML = '';

  for (let i = 0; i < characters.length; i++) {
    const span = document.createElement('span');
    span.innerHTML = characters[i];
    animation.appendChild(span);
  }

  const spans = animation.childNodes;

  for (let i = 0; i < spans.length; i++) {
    const span = spans[i];

    setTimeout(function () {
      span.classList.add('fadeIn');
      span.classList.remove('fadeOut');
    }, i * 100);
  }

  setTimeout(function () {
    for (let i = 0; i < spans.length; i++) {
      const span = spans[i];

      setTimeout(function () {
        span.classList.add('fadeOut');
        span.classList.remove('fadeIn');
      }, i * 100);
    }
  }, currentWord.length * 100);

  count++;

  if (count === words.length) {
    count = 0;
  }

  setTimeout(changeWord, currentWord.length * 100 + 1000);
}

changeWord();
</script>

示例2

<div class="wrap">
  <h1 id="text">这是一段文字</h1>
  <div id="animation">
    <span>喜</span>
    <span>逢</span>
    <span>欢</span>
    <span>乐</span>
    <span>多</span>
    <span>多</span>
  </div>
</div>

<style>
#animation span {
  position: absolute;
  opacity: 0;
}

#animation .fadeIn {
  opacity: 1;
  transition: opacity 1s ease-in-out;
}

#animation .fadeOut {
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

#animation .dissolve {
  opacity: 0;
  transition: opacity 1.5s ease-in-out;
  animation: dissolve 1.5s ease-in-out forwards;
}

@keyframes dissolve {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
</style>

<script>
const text = document.getElementById('text');
const animation = document.getElementById('animation');
const words = ['好运常伴', '迎来幸福', '快乐好时光', '共度美好'];

let count = 0;

function changeWord() {
  const currentWord = words[count];
  const characters = currentWord.split('');

  animation.innerHTML = '';

  for (let i = 0; i < characters.length; i++) {
    const span = document.createElement('span');
    span.innerHTML = characters[i];
    animation.appendChild(span);
  }

  const spans = animation.childNodes;

  for (let i = 0; i < spans.length; i++) {
    const span = spans[i];

    setTimeout(function () {
      span.classList.add('fadeIn');
      span.classList.remove('fadeOut');
    }, i * 100);
  }

  setTimeout(function () {
    for (let i = 0; i < spans.length; i++) {
      const span = spans[i];

      setTimeout(function () {
        span.classList.add('fadeOut');
        span.classList.remove('fadeIn');
      }, i * 100);
    }
  }, currentWord.length * 100);

  count++;

  if (count === words.length) {
    count = 0;
  }

  setTimeout(changeWord, currentWord.length * 100 + 1000);
}

changeWord();
</script>