将Coffeescript转换为Typescript以用于Angular2

时间:2017-12-11 20:01:13

标签: javascript angular typescript coffeescript

我想从CodePen开始使用此导航栏动画 但它使用Coffeescript,我不知道如何使用它。 有没有办法找到解决方法或我需要将其转换为typescipt? 这就是coffeescript的样子

do (window) ->
if 'classList' of document.documentElement

haClass = (elem, c) ->
  elem.classList.contains c

adClass = (elem, c) ->
  elem.classList.add c
  return

remClass = (elem, c) ->
  elem.classList.remove c
  return


anim = 
hasClass: haClass
addClass: adClass
removeClass: remClass
ha: haClass
ad: adClass
rem: remClass
if typeof define == 'function' and define.amd
define anim
else
window.anim = anim
return
menuEffects = do ->

hasParentClass = (e, classname) ->
if e == document
  return false
if anim.ha(e, classname)
  return true
e.parentNode and hasParentClass(e.parentNode, classname)

statusCheck = ->
check = false
check

init = ->
container = document.getElementById('sdcnt')
buttons = Array::slice.call(document.querySelectorAll('#sd-trig > button'))
eventtype = if statusCheck() then 'touchstart' else 'click'

returnMen = ->
  anim.rem container, 'sdmenu-open'
  return

bodyClickFn = (evt) ->
  if !hasParentClass(evt.target, 'sdmenu')
    returnMen()
    document.removeEventListener eventtype, bodyClickFn
  return

buttons.forEach (el, i) ->
  effect = el.getAttribute('effect')
  el.addEventListener eventtype, (ev) ->
    ev.stopPropagation()
    ev.preventDefault()
    container.className = 'sdcnt'
    anim.ad container, effect
    setTimeout (->
      anim.ad container, 'sdmenu-open'
      return
    ), 25
    document.addEventListener eventtype, bodyClickFn
    return
  return
return

init()
return

# removable page animations
$('a').attr 'class': 'hvr-underline-from-left hvr-wobble-horizontal'
$('i').attr 'class': 'ion-ios-arrow-forward'
$('button').attr 'class': 'animated bounceIn  hvr-pulse-grow'
$('h1').attr 'class': 'animated bounceIn hvr-pulse-grow'
$('h2').attr 'class': 'animated bounceIn hvr-wobble-skew'

我甚至不确定如何使用它,我不熟悉它 任何好的建议将不胜感激!

0 个答案:

没有答案