Javascript 如何从下到上增加图像的高度

这是我给油箱加油的代码

const filler=(props)=>(
    <div className={Classes.filler} style={{height: `${props.percentage}%`}}></div>
);

我要处理的问题是，水的图像不是从下到上增加的，而是从上到下增加的。我试图改变图像的来源，但没有成功。 这里有一些图片供参考

---

你能试试这个吗。我不确定是什么触发了动画，但在本例中，我只假设它的悬停指向一个链接

.filler{
    background: url('../../../../assets/image/dark.png');
    background-size: 180%;
    width: 100%;
    background-repeat: no-repeat;
    height: 0px;
    overflow:hidden;
    -webkit-transition: all 1s linear;
    -moz-transition: all 1s linear;
    -o-transition: all 1s linear;
    transition: all 1s linear;
    position:absolute;
    left:0;
    bottom:0;
}
.animationstart:hover{
   height: 200px; /* max height */
}

---

这是React应用程序吗？@Teemu

className

和

props

，看起来像是React应用程序。很高兴我能帮上忙。：）

.filler{
    background: url('../../../../assets/image/dark.png');
    background-size: 180%;
    width: 100%;
    background-repeat: no-repeat;
    height: 0px;
    overflow:hidden;
    -webkit-transition: all 1s linear;
    -moz-transition: all 1s linear;
    -o-transition: all 1s linear;
    transition: all 1s linear;
    position:absolute;
    left:0;
    bottom:0;
}
.animationstart:hover{
   height: 200px; /* max height */
}