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
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions