2

https://jsfiddle.net/elgs/580nhepk/11/

ease-in这个小演示正在尝试使用计时/缓动功能向上/向下滑动 div 。但是，似乎缓和效果只有在第一次下滑时才有效。从第二次开始，宽松的效果似乎消失了。

HTML

<button id='slideup'>Slide Up</button>
<button id='slidedown'>Slide Down</button>
<div id="a"></div>

Javascript

const a = document.querySelector('div#a');
const u = document.querySelector('button#slideup');
const d = document.querySelector('button#slidedown');

u.addEventListener('click', (e) => {
  a.style.setProperty('--height', '30px');
  a.classList.add('slide');
});

d.addEventListener('click', (e) => {
  a.style.setProperty('--height', '100px');
  a.classList.add('slide');
});

CSS

div#a {
  width: 100px;
  height: 100px;
  box-sizing: border-box;
  border: 1px solid gray;
}

@keyframes slide {
  to {
    height: var(--height);
  }
}

.slide {
  animation-name: slide;
  animation-duration: .4s;
  animation-timing-function: ease-in;
  animation-delay: 0s;
  animation-direction: normal;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  animation-play-state: running;
}
4

2 回答 2

2

这是因为您已将动画设置为仅运行一次，因此它不会再次运行，除非您每次都从元素中删除动画类 + 触发重排 + 更新其高度属性。

const a = document.querySelector('div#a');
const u = document.querySelector('button#slideup');
const d = document.querySelector('button#slidedown');

u.addEventListener('click', (e) => {
  a.style.setProperty('height', '100px'); // so the animation knows the 'from' value
  a.style.setProperty('--height', '30px');
  a.classList.remove('slide'); // so the animation starts again
  a.offsetHeight; // so the no-class be calculated
  a.classList.add('slide');
});

d.addEventListener('click', (e) => {
  a.style.setProperty('height', '30px');
  a.style.setProperty('--height', '100px');
  a.classList.remove('slide');
  a.offsetHeight;
  a.classList.add('slide');
});
div#a {
  width: 100px;
  height: 100px;
  box-sizing: border-box;
  border: 1px solid gray;
}

@keyframes slide {
  to {
    height: var(--height);
  }
}

.slide {
  animation-name: slide;
  animation-duration: .4s;
  animation-timing-function: ease-in;
  animation-delay: 0s;
  animation-direction: normal;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  animation-play-state: running;
}
<button id='slideup'>Slide Up</button>
<button id='slidedown'>Slide Down</button>
<div id="a"></div>

但无论如何，您想要的不是动画 ，而是过渡：

const a = document.querySelector('div#a');
const u = document.querySelector('button#slideup');
const d = document.querySelector('button#slidedown');

u.addEventListener('click', (e) => {
  a.style.setProperty('--height', '30px');
});

d.addEventListener('click', (e) => {
  a.style.setProperty('--height', '100px');
});
div#a {
  width: 100px;
  height: 100px;
  height: var(--height, 100px);
  box-sizing: border-box;
  border: 1px solid gray;
}

.slide {
  transition: height .4s ease-in;
}
<button id='slideup'>Slide Up</button>
<button id='slidedown'>Slide Down</button>
<div id="a" class="slide"></div>

于 2018-04-11T06:50:11.710 回答
0

css 动画通常在页面加载后第一次执行动画。在这种情况下，您应该使用 css 过渡而不是 css 动画，例如：

.slide-up {
height : 30px;
}
.slide-down {
height : 60px;
}
#a{
transition: height 200ms
}
于 2018-04-11T07:00:49.243 回答