如何根据我从<select>中选择的值来锁定CSS中的过渡？

<select id="mySelect">
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
  <option value="option3">Option 3</option>
</select>

.transition-option1 {
  /* 过渡效果1的样式 */
}

.transition-option2 {
  /* 过渡效果2的样式 */
}

.transition-option3 {
  /* 过渡效果3的样式 */
}

const select = document.getElementById("mySelect");
select.addEventListener("change", handleSelectChange);

function handleSelectChange() {
  // 获取选中的值
  const selectedValue = select.value;

  // 根据选中的值切换对应的过渡效果
  toggleTransition(selectedValue);
}

function toggleTransition(value) {
  // 先移除所有过渡效果的类名
  select.classList.remove("transition-option1", "transition-option2", "transition-option3");

  // 根据选中的值添加对应的过渡效果的类名
  select.classList.add("transition-" + value);
}