CSS 转换属性不使用转换

Question

我一直在尝试在我的 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);
}

我知道我没有使用按钮来添加 class。我只是手动添加并保存。但它确实有效。这是完整的代码 link

Answer 1

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

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

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

.box:hover {
  width: 300px;
}

或者您可以使用事件

将其添加到JavaScript

Answer 2

包括显示 class 在盒子上的即时效果将不会显示任何动画。如果您使用 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>

Answer 3

你必须使用 transition 和一些像 :hover,:focus 这样的活跃的尝试玩转：

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

CSS 转换属性不使用转换

CSS transition Property not working with Transform

html

css

transform

transition

CSS 转换 属性 不使用转换

CSS transition Property not working with Transform

html

css

transform

transition

CSS 转换属性不使用转换