AnimeJS TranslateY:0 跳出页面

如何解决AnimeJS TranslateY:0 跳出页面

使用 AnimeJS...

当 active=true 元素按预期进行动画处理时，从页面下方开始向上移动。

当 active=false 元素应该转换回它在页面下方的起始位置时，但在返回到 0 之前似乎跳到了页面下方很远的位置。

Sass

.modal
    --modalHeight: calc(100vh - 80px)
    --modalTransition: calc(-1 * var(--modalHeight))
    position: fixed
    height: var(--modalHeight)
    bottom: var(--modalTransition)

Javascript

handleModal(active){
    const modalTransition = getComputedStyle(document.querySelector('div.modal')).getPropertyValue('--modalTransition')

    if(active){
        anime({
            targets: 'div.modal',translateY: [0,modalTransition],duration: 800,easing: 'eaSEOutQuad',})
    } else {
        anime({
            targets: 'div.modal',translateY: [modalTransition,0],})
    }
}

解决方法

我的回答是将 CSS calc() 值转换为整数值，方法是将 modalTransition 值替换为：

const modalTransition =
    -Math.abs(parseInt(getComputedStyle(document.querySelector('div.modal')).height))