CSS для размещения сверху на 100%, а затем снизу на 16 пикселей с помощью Framer Motion - PullRequest
Новая
       18

CSS для размещения сверху на 100%, а затем снизу на 16 пикселей с помощью Framer Motion

0 голосов
/ 29 марта 2020

Я пытаюсь анимировать в div снизу, который останавливается на 16 пикселей снизу. Это div может быть переменной высоты. Я использую Framer Motion. Я хотел бы установить состояния, такие как:

Варианты 

modalOpen: { bottom: '16px' }, // It's just above the bottom
modalClose: { top: '100%' },   // It goes out of view on the bottom

Тогда 

     <motion.div
          initial="modalClose"
          animate="modalOpen"
          exit="modalClose"
          variants={variants}
          className="modal"
          ref={modalElement}
      >

Я мог бы просто использовать верх или низ, если бы я знал высоту элемента.

Редактировать, я получил аналогичный эффект, установив top:100% на div и анимировав его: 

modalOpen: { y: 'calc(-100% - 16px)' },
modalClose: { y: 0 },
...