Question

我有一个基本的设置。当我增加高度时，我会平稳增加。当减少时，我应该顺利减少但反而急剧下降。

<div className="foo <!-- -->">Hey</div>

您可能已经注意到className和，我正在使用反应。 被类替换为降低高度。

// SCSS
.foo { 
 height 400px;
 // background props
 transition: all 250ms ease-out
}

.foo.decreaseClass {
  height: 40px;
  transition: all 250ms ease-in
}

当附加新类时，div变为

<div className="foo decreaseClass">Hey</div>

如何向下/向上移动两个转换？

Answer 1

使用CSS @keyframe animation和alternate属性。添加infinite仅用于演示目的。我没有height而是将transform:scaleY(1)添加到(10)。

演示

body {
  overflow: hidden
}

.test {
  width: 200px;
  margin: 10px;
  background: red;
  font-size: 32px;
  text-align: center;
  color: white
}

.B {
  height: 40px;
  animation: animB 1s alternate infinite;
  transform-origin: top;

}

@keyframes animB {
  0% {
    transform: scaleY(1);
  }

  100% {
    transform: scaleY(10);
  }
}

<div class='test B'>TEST</div>

Answer 2

这是因为您未正确关闭height中的.foo声明。您使用逗号而不是分号，导致height和transition声明无效。另请注意，同一声明应在样式属性名称及其值（colon）之间包含height: 400px;。

因此，只有同时拥有这两个类时，您的元素才会定义height和transition。

看到它正常工作：

＆＃13;

document.querySelector('.foo').addEventListener('click', function(event) {
  event.target.classList.toggle('decreaseClass')
})

＆＃13;

.foo {
  height: 200px;
  transition: all 250ms ease-out;
  border: 1px solid
}

.foo.decreaseClass {
  height: 40px;
  transition-timing-function: ease-in
}

＆＃13;

<div class="foo">Hey</div>

＆＃13;

高度变化的转换div没有jquery

2 个答案:

演示