CSS过渡属性不适用于Transform答案

【问题标题】：CSS transition Property not working with TransformCSS过渡属性不适用于Transform
【发布时间】：2021-08-07 08:14:36
【问题描述】：

我一直试图在我的 div 框上获得一些过渡效果。但它没有工作

.box{
            height: 200px;
            width: 400px;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: blueviolet;
            margin: 20px;
            border-radius: 20px;
            transform: translateX(200%);
             transition: transform 1s ease-in-out;
        }



.box.show{
    transform: translateX(0);
}

我知道我没有使用按钮来添加课程。我只是手动添加并保存。但它似乎不起作用。这是完整代码link

【问题讨论】：

这似乎工作正常。您可以查看此JSFiddle。请分享整个代码或更好地简要介绍您的场景。
@ManojMohan 这是完整的代码link

标签： html css transform transition

【解决方案1】：

立即在盒子上包含 show 类将不会显示任何动画。如果您使用setInterval（出于演示目的），您将看到动画有效。

//Toggle the class every second
setInterval(function(){ 
    document.getElementById('box').classList.toggle('show');
}, 1000);

.box{
  padding: 15px;
  height: 60px;
  width: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: blueviolet;
  margin: 20px;
  border-radius: 20px;
  transform: translateX(10%);
  transition: transform 1s ease-in-out;
  font-family: sans-serif;
}

.box.show{
    transform: translateX(0);
}

<!-- will animate since the show class is added after the initial render -->
<div id="box" class="box">I'm a box with show class added after initial render ?</div>

<!-- Will not animate, the show class will determine it's initial transform -->
<div class="box show">I'm a box with show already added ?</div>

【讨论】：

我知道，我只是手动添加它以检查它是否工作。但它似乎不起作用。这是完整的代码link
一切正常。如果您删除溢出：隐藏在身体上，您可以看到它的作用。 jsfiddle.net/a9yp8kvd
您实际上需要在页面呈现后添加类，否则您将看不到过渡。在元素上已经有show 是问题所在。
哦，是的，它在添加按钮后工作。我的坏谢谢回答
澄清答案以帮助遇到此问题的其他人。

【解决方案2】：

您必须使用一些活动的转换，例如 :hover,:focus 尝试玩弄：

.box:hover{
transform: translateX(0);}

【讨论】：

【解决方案3】：

过渡是一个动画。你可以看看here

你需要用一个动作来“调用”它

box {
  width: 100px;
  height: 100px;
  background: red;
  transition: width 2s;
}

.box:hover {
  width: 300px;
}

或者您可以使用事件在 JavaScript 中添加它

【讨论】：