javascript - 通过动画显示 HTML Div？

Question

我有一个半圆形的div，里面会有一些内容。它将被渲染但开始时不可见(使用 Angular 2)。在某个用户操作中，将鼠标悬停在屏幕的另一部分上，div 将出现，但我不想只使用 display:none/block 或 hidden。

我想做的是让另一个具有类似 css 的 div 充当 mask 并向上滑动以显示半圆形 div。

我试过很多方法，把代码贴在这里没有任何好处。我通过改变它的位置使它动画化，使其进入视野，但这似乎是一种荒谬的方式。

    <div class="semi-circle">
      <button class="add-button" >Add</button>
    </div>

    .semi-circle{
         height:80px;
         width:160px;
         border-radius: 90px 90px 0 0;
         -moz-border-radius: 90px 90px 0 0;
         -webkit-border-radius: 90px 90px 0 0;
         background:green;
    }
    .add-button{
        position:absolute;
        left: 65px;
        top: 50px;
    }

This is basically what it will look like

Answer 1

您可以单独在 CSS 中实现此效果，使用 ::after 伪元素和 transition:

.semi-circle {
position: relative;
display: inline-block;
width:160px;
height:80px;
background-color: rgba(0,0,0,0);
border-radius: 90px 90px 0 0;
overflow: hidden;
}

.semi-circle::after {
content: '';
position: absolute;
display: block;
top: 80px;
left: 0;
width:160px;
height:80px;
background-color: rgb(0,255,0);
border-radius: 90px 90px 0 0;
transform: translateY(0);
transition: all 0.75s ease-out;
}

p {
display: inline-block;
width: 160px;
text-align: center;
}

p:hover ~ .semi-circle::after {
transform: translateY(-80px);
}

<p>Hover me</p>
<div class="semi-circle"></div>