How to make animation display block / none without jquery?

  • 0
    The block has display: none, on mouseover the property changes to display: block
    Animation occurs via query slideToggle, the block seems to slide down

    Can this be done in pure js or css?
    I know the display property is not animated. It could have been through height, but the property changes from 0 to auto, which also does not animate ....
    I saw various implementations through opacity, visible, but everything is very ugly there, through appearance, etc. A simple, beautiful option for leaving the block, as jquery slideToggle does, I have never seen

    Tried it through anime.js but the display property is not animated there either
    Maybe there are some animation libraries that can do this
    JavaScript Anonymous, Jul 1, 2019

  • 2 Answers
  • 0

  • 0
    Can be animated via max-height and overflow: hidden; in the hover, set the max height clearly exceeding the required

Your Answer
To place the code, please use CodePen or similar tool. Thanks you!