使用JavaScript触发过渡效果的方法

下面是使用JavaScript触发过渡效果的方法的完整攻略。

什么是CSS过渡效果

在介绍如何使用JavaScript触发过渡效果之前，先来简单介绍一下什么是CSS过渡效果。CSS过渡效果（CSS Transitions）是一种可以让元素在某个CSS属性发生变化的时候，产生平滑的动效的方法。

比如我们可以通过如下代码来让一个元素当宽度发生变化时，平滑地变宽：

.box{
  width: 100px;
  transition: width 1s;
}
.box:hover{
  width: 200px;
}

上面的代码中，我们定义了一个 .box 类，用来设置宽度为100px，同时给它设置了一个 transition 属性，表示当宽度发生变化时，在1s内产生平滑的动效。然后通过 :hover 伪类设置了鼠标悬停时的宽度为200px，这样当鼠标悬停在 .box 元素上时，宽度会从100px平滑地变为200px。

JavaScript触发过渡效果的方法

了解了CSS过渡效果的基本原理，我们现在就可以开始介绍如何使用JavaScript触发过渡效果了。

实现 JavaScript 触发过渡效果的方法有很多，其中比较常见的几种方法如下：

1. 使用 classList.add() 和 classList.remove() 方法

我们可以利用 classList 对象提供的 add() 方法和 remove() 方法来动态添加或删除一个类名，从而触发元素的过渡效果。

比如我们可以这样：

var box = document.querySelector('.box');
box.addEventListener('click', function(){
  box.classList.add('wide');
  box.classList.remove('narrow');
});

上面的代码中，我们给 .box 元素添加了一个 click 事件，当点击 .box 元素时，会先添加 wide 类名（用于设置 .box 的宽度变宽的样式），然后移除 narrow 类名（用于设置 .box 的宽度变窄的样式），这样就能触发一个平滑的过渡效果。

2. 使用 element.offsetWidth 属性

我们还可以通过改变元素的 offsetWidth 属性值来触发其过渡效果。可以像下面这样实现：

var box = document.querySelector('.box');
box.addEventListener('click', function(){
  box.style.width = box.offsetWidth + 50 + 'px';
});

上面的代码中，我们也是给 .box 元素添加了一个 click 事件，当点击 .box 元素时，会将其宽度增加50px，然后过渡效果就会自动触发了。

示例说明

下面给出两个使用JavaScript触发过渡效果的示例：

示例1：使用 classList.add() 和 classList.remove() 方法

<div class="box narrow"></div>

<style>
.box{
  width: 100px;
  height: 100px;
  background-color: red;
  transition: width 1s;
}
.box.wide{
  width: 200px;
}
</style>

<script>
var box = document.querySelector('.box');
box.addEventListener('click', function(){
  box.classList.add('wide');
  box.classList.remove('narrow');
});
</script>

上面的代码中，我们先定义了一个 .box 类，用来设置宽高、背景颜色等样式，并且设置了一个 transition 属性，表示当宽度发生变化时，在1s内产生平滑的动效。同时，.wide 类名则定义了 .box 元素宽度变宽的样式。在 JavaScript 部分，我们给 .box 元素添加了一个 click 事件，当点击 .box 元素时，会先添加 wide 类名（用于设置 .box 的宽度变宽的样式），然后移除 narrow 类名（用于设置 .box 的宽度变窄的样式），这样就能触发一个平滑的过渡效果。

示例2：使用 element.offsetWidth 属性

<div class="box"></div>

<style>
.box{
  width: 100px;
  height: 100px;
  background-color: red;
  transition: width 1s;
}
</style>

<script>
var box = document.querySelector('.box');
box.addEventListener('click', function(){
  box.style.width = box.offsetWidth + 50 + 'px';
});
</script>

上面的代码中，我们同样定义了一个 .box 类，用来设置宽高、背景颜色等样式，并且设置了一个 transition 属性，表示当宽度发生变化时，在1s内产生平滑的动效。在 JavaScript 部分，我们给 .box 元素添加了一个 click 事件，当点击 .box 元素时，会将其宽度增加50px，触发过渡效果。