CSS CSS3 当类添加时才触发过渡效果，删除类时不触发

在本文中，我们将介绍如何使用CSS3实现当类添加时才触发过渡效果，而删除类时不触发过渡效果的方法。

阅读更多：https://sotoolbox.com/tag/css target="_blank" rel="nofollow">CSS 教程

什么是过渡效果？

在CSS中，过渡效果是一种用于控制元素属性变化的动画效果。当某个元素的属性值发生变化时，设置过渡效果可以让这个变化变得平滑，并带有一定的动画效果。

如何使用CSS3实现当类添加时触发过渡效果？

我们可以使用CSS3的transition属性来实现当类添加时触发过渡效果。首先，我们需要先定义一个通用的类，例如.transition-effect，并设置需要过渡的属性和过渡时间。

.transition-effect {
  transition: [property] [duration];
}

然后，当需要触发过渡效果时，我们可以通过动态地添加或删除这个类来实现。例如，当鼠标悬停在按钮上时触发过渡效果：

<button class="transition-effect" onmouseover="this.classList.add('active')" onmouseout="this.classList.remove('active')">按钮</button>

在上面的示例中，当鼠标悬停在按钮上时会给按钮添加一个名为active的类，这个类定义了过渡效果。当鼠标移开时会删除active类，从而取消过渡效果。

示例说明

为了更好地说明实现原理，我们来做一个简单的示例。我们创建一个按钮，当按钮被点击时，给按钮添加一个类，从而触发过渡效果。

<!DOCTYPE https://sotoolbox.com/tag/css target="_blank" rel="nofollow">html>
<https://sotoolbox.com/tag/css target="_blank" rel="nofollow">html>
<head>
<style>
.button {
  padding: 10px 20px;
  background-color: #ccc;
  transition: background-color 0.3s;
}

.button.active {
  background-color: #f00;
}
</style>
</head>
<body>

<button class="button" onclick="this.classList.add('active')">点击我</button>

</body>
</html>

在上面的示例中，.button类定义了按钮的基本样式，并设置了背景颜色的过渡效果。当按钮被点击时，通过调用classList.add('active')方法，给按钮添加了一个名为active的类，从而改变了按钮的背景颜色，并触发了过渡效果。