Javascript 通过动画显示HTML Div？

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

我想做的是让另一个具有类似css的div作为遮罩，并向上滑动以显示半圆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;
    }

添加
.半圆{
高度：80px；
宽度：160px；
边界半径：90px 90px 0；
-moz边界半径：90px 90px 0；
-webkit边界半径：90px 90px 0；
背景：绿色；
}
.添加按钮{
位置：绝对位置；
左：65px；
顶部：50px；
}

---

您可以仅在CSS中实现此效果，在伪元素之后使用一个

：：和一个
转换
：


。半圆{
位置：相对位置；
显示：内联块；
宽度：160px；
高度：80px；
背景色：rgba（0,0,0,0）；
边界半径：90px 90px 0；
溢出：隐藏；
}
.半圆：：后{
内容：''；
位置：绝对位置；
显示：块；
顶部：80px；
左：0；
宽度：160px；
高度：80px；
背景色：rgb（0255,0）；
边界半径：90px 90px 0；
变换：translateY（0）；
过渡：所有0.75秒都会变缓；
}
p{
显示：内联块；
宽度：160px；
文本对齐：居中；
}
悬停~。半圆：：后{
转换：translateY（-80px）；
}
将鼠标悬停在我身上

作为一般建议，
translate
比设置
position
left/right/top/bottom值的动画效果好得多？这会节省你很多时间。@ODelibalta嗨。我希望半圆显示在它的当前位置，即从不可见到可见，用另一个半圆作为剪辑区域-这样它看起来像是在扩展自己，而不仅仅是在一个接近的块中移动。但是，当translateY发生时，div会沿着顶部展开一条直边。我希望我需要第二个div的原因是，我希望它以相同的曲线显示，而不是沿着顶部的直边，这是因为一个白色的半圆向上移动，下面显示一个绿色的半圆。你可以看到的直边是白色半圆的底部向上移动：-）我已经改变了它（非常轻微），一个绿色的半圆现在向上移动，使白色的半圆相形见绌。我认为现在我看它不起作用。div可以放置在文本、其他组件或任何彩色背景之上。它将从透明变成可见。你有一些严肃的造型技巧@Rounin！！经过6年的ActionScript之后，我才从ActionScript编程转向JavaScript，而CSS方面可能是最大的挑战！