时间戳

首页 > 解决方案 > 你如何堆叠CSS动画

css - 你如何堆叠CSS动画

问题描述

我有一个要制作动画的 CSS 元素。盒子从高度 30px 开始。单击时，我希望框首先缩小到高度 0px，然后动画到 60px

document.getElementById("box1").style = "transition: height 0s;  transition-delay: 0s; height:0px";    
document.getElementById("box1").style = "transition: height .50s;  transition-delay: .50s; height:60px";

我尝试了上述方法，但第二行覆盖了第一行。

标签： cssanimation

解决方案

这是一个应该有帮助的例子：https ://jsfiddle.net/qshruafp/

document.getElementById("box1").addEventListener('click', ManageBoxClick);

function ManageBoxClick() {
  console.log('Entered ManageBoxClick');
  
  document.getElementById("box1").animate([
  // keyframes
    { height: '30px' },
  { height: '0px' },
  { height: '60px' }
  ], {
    // timing options
    duration: 1000
  });
  
}
#box1 {
   position relative;
   display: block;
    
  background-color: blue;
  
  width: 30px;
  height: 30px;
  
  cursor: pointer;
  pointer-events: all;
}
<div id="box1"></div>

推荐阅读