Question

我正在尝试创建一个弹出屏幕，触发点击一个利用Javascript内部的ActionListener的按钮。动画基本上是一条从左向右扩展的水平线，一旦水平线达到其全长，它将向上和向下扩展以创建一个弹出框。我尝试使用由javascript调用的css webkit动画，但它似乎只制作垂直动画，然后水平线消失，完全忽略垂直扩展。

＆＃13;

init();
function init(){

    document.getElementById("Btn").addEventListener("click",function(){
        document.getElementById("popup-animation").style.visibility = "visible";
        document.getElementById("popup-animation").style.WebkitAnimation = 
        "popup-horizontal-line 3s, popup-vertical-expansion 2s 3s";
    });


}

＆＃13;

body{
  background-color: black;
}

#popup-animation{
  width: 0;
  height: 2px;
  position: absolute;
  left: 30%;
  top: 30%;
  visibility: hidden;
  background-color: white;
  color: white;
}


@-webkit-keyframes popup-horizontal-line{

  0%{
    width: 0;
  }

  100%{
    width: 40%;
  }

}

@-webkit-keyframes popup-vertical-expansion{

  0%{
    height: 0;
  }

  100%{
    height: 40%;

  }  
}

＆＃13;

<!DOCTYPE html>
<html>
<head>
    <title>CSS Popup Animation</title>
    <head>
<link rel="stylesheet" type="text/css" href="test.css">
</head>
</head>
<body>
<button id="Btn">Click</button>
<div id = popup-animation>content</div>
<script type="text/javascript" src="test.js"></script>


</body>
</html>

＆＃13;

Answer 1

你需要添加＆＃34;前锋＆＃34;关键字，以便元素保持动画结尾处达到的样式

另外，摆脱浏览器前缀，完全没必要。并且您可能想要添加溢出：隐藏到弹出窗口，因此在绘制水平线时内容不会显示。

＆＃13;

init();
function init(){

    document.getElementById("Btn").addEventListener("click",function(){
        document.getElementById("popup-animation").style.visibility = "visible";
        document.getElementById("popup-animation").style.animation = 
        "popup-horizontal-line 3s forwards, popup-vertical-expansion 2s 3s forwards";
    });


}

＆＃13;

body{
  background-color: black;
}

#popup-animation{
  width: 0;
  height: 2px;
  position: absolute;
  left: 30%;
  top: 30%;
  visibility: hidden;
  background-color: white;
  color: black;
  overflow:hidden;
}


@keyframes popup-horizontal-line{

  0%{
    width: 0;
  }

  100%{
    width: 40%;
  }

}

@keyframes popup-vertical-expansion{

  0%{
    height: 0;
  }

  100%{
    height: 40%;

  }  
}

＆＃13;

<html>
<head>
    <title>CSS Popup Animation</title>
    <head>
<link rel="stylesheet" type="text/css" href="test.css">
</head>
</head>
<body>
<button id="Btn">Click</button>
<div id ="popup-animation">content</div>
<script type="text/javascript" src="test.js"></script>
</body>
</html>

＆＃13;

Answer 2

您需要将animation-fill-mode forwards添加到这两个动画中

这是一个适用于所有浏览器的，使用类而不是“内联”样式：p

init();
function init(){

    document.getElementById("Btn").addEventListener("click",function(){
        document.getElementById("popup-animation").style.visibility = "visible";
        document.getElementById("popup-animation").classList.add('doanim');
    });


}

#popup-animation{
  width: 0;
  height: 2px;
  position: absolute;
  left: 30%;
  top: 30%;
  background-color: red;
  color: white;
}

.doanim {
  animation: popup-horizontal-line    3s, popup-vertical-expansion 2s 3s;
  animation-fill-mode: forwards, forwards;
}

@keyframes popup-horizontal-line{

  0%{
    width: 0;
  }

  100%{
    width: 40%;
  }

}

@keyframes popup-vertical-expansion{

  0%{
    height: 2px;
  }

  100%{
    height: 40px;

  }  
}

<button id="Btn">Click</button>
<div id = popup-animation>content</div>

css弹出屏幕动画无法正常工作

2 个答案: