Skip to content

Animations required for close #285

@mmeeks

Description

@mmeeks

For one reason and another we had a vex dialog without any animation around close. There is code to handle this in vex:

  // Detect if the content el has any CSS animations defined
  var style = window.getComputedStyle(this.contentEl)
  function hasAnimationPre (prefix) {
    return style.getPropertyValue(prefix + 'animation-name') !== 'none' && style.getPropertyValue(prefix + 'animation-duration') !== '0s'
  }
  var hasAnimation = hasAnimationPre('') || hasAnimationPre('-webkit-') || hasAnimationPre('-moz-') || hasAnimationPre('-o-')

That (I guess) checks to see if the open has an animation and assumes there is one for close - but that seems ~reasonable I guess. What is not working is that:
getPropertyValue('-moz-animation-name') returns "" and not 'none' on Google Chrome - and same for '-o-animation-name'. So this code-path can't possibly work.

hasAnimationPre(prefix) should be extended to check for empty / undefined states and bail out - as an example:

    return style.getPropertyValue(prefix + 'animation-name') !== 'none' &&
              style.getPropertyValue(prefix + 'animation-name') !== '' &&
              style.getPropertyValue(prefix + 'animation-duration') !== '0s'

Would be wonderful to have a test for that too I guess.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions