search

lega911 / angular-light

Alight is a library for building interactive MVVM web interfaces/applications. (project is deprecated)
MIT License
274 stars 43 forks source link

Animate in alight 0.12 #236

Closed sanzstez closed 7 years ago

sanzstez commented 7 years ago

Hello! I have small question. How can I use al-show / al-hide animation bindings in 0.12 version? I need to make smoothly show/hide animations for this actions but i can not find ability to do this in this version. Could you please help me? Thanks! P.S. I found only this manual http://angularlight.org/doc/animation.html but it is not works on 0.12.

sanzstez commented 7 years ago

Oh, I found solution myself. Just override show directive :)

alight.directives.al.showAnimate = (scope, element, exp, env) ->
  dir = alight.directives.al.show(scope, element, exp, env)

  dir.showDom = ->
    #$(element).removeClass('al-test')
    $(element).slideDown 500
    return

  dir.hideDom = ->
    #$(element).addClass('al-test')
    $(element).slideUp 500
    return

  dir.start = ->
    $(element).css('display', 'none') if not env.changeDetector.getValue(exp)
    dir.watchModel()
    return

  dir
lega911 commented 7 years ago

Hello! there is no special things for animation in last version, as variant you can do it changing class: https://jsfiddle.net/lega911/pdgzzymk/