如何添加速度效果的内容隐藏和显示与文本更改切换？

<button onclick="toggleContent()">切换内容</button>
<p id="content" style="display: none;">这是要隐藏和显示的内容。</p>
<p id="text">这是要更改的文本。</p>

function toggleContent() {
  var content = document.getElementById("content");
  var text = document.getElementById("text");

  if (content.style.display === "none") {
    content.style.display = "block";
    text.innerHTML = "文本已更改。";
  } else {
    content.style.display = "none";
    text.innerHTML = "这是要更改的文本。";
  }
}

button {
  padding: 10px;
  background-color: #337ab7;
  color: #fff;
  border: none;
  cursor: pointer;
}

p {
  font-size: 16px;
  margin-bottom: 10px;
}