Meteor 如何在《流星》中为著名的美国表面制作动画

我正在使用著名的流星视图包，我喜欢它。我创建了一个简单的UI，其中包含一些模板和一些曲面等等。现在我想做一些简单的动画。我想这样做：

surface.on("click", function (e) {
  transform.setTransform(endPos, easeTransition);
  startPos = [endPos, endPos = startPos][0];
});

mainCtx.add(transform).add(surface);

---

问题是，曲面是自动添加到上下文的，因此我无法在添加曲面之前添加变换

在模板中

<template name="appMainView">
    {{#Surface id="redbox" size="[250,350]" origin="[.5, .5]" align="[.5, .5]" class="redCard" modifier="Modifier"}}
        Click Me
    {{/Surface}}
</template>

---

请参见

中的教程。在Template.myTemplate.created或rendered回调期间，是否不能修改曲面？谢谢对于像我这样的傻瓜来说，这是一个多么棒的教程。不用担心。。。请确保签出，您可以将示例放入Template.templateName.rendered=function（）{//将famo.us代码作为js}

Template.appMainView.rendered = ->
    mainContext = FView.byId 'mainCtx'
    mainContext.context.setPerspective 1000
    # transitionable object
    angleDegrees = new Famous.Transitionable -60

    isToggled = off
    defaultDegrees = angleDegrees.get()
    degreesToRadians = 0.0174533
    flag = off

    # red box code
    redBox = FView.byId 'redbox'
    redBoxSurface = redBox.surface
    redBoxModifier = redBox.modifier

    redBoxSurface.on 'click', =>
        if isToggled is on
            targetAngle = defaultDegrees
        else
            targetAngle = -defaultDegrees
        if angleDegrees.isActive()
            angleDegrees.halt()
        angleDegrees.set targetAngle, { duration: 2000, curve: 'easeInOut'}, =>
            console.log 'Transition completed!'
        isToggled = !isToggled

    redBoxModifier.transformFrom =>
        return Famous.Transform.rotateY angleDegrees.get() * degreesToRadians