时间戳

首页 > 解决方案 > AnimeJS TranslateY:0 跳出页面

javascript - AnimeJS TranslateY:0 跳出页面

问题描述

使用动漫...

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

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

萨斯

.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],
            duration: 800,
            easing: 'easeOutQuad',
        })
    }
}

标签： javascriptcssanime.js

解决方案

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

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

推荐阅读