我想从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'
我甚至不确定如何使用它,我不熟悉它 任何好的建议将不胜感激!