Question

阅读http://www.polymer-project.org/docs/elements/core-elements.html#core-transition之后，我正在尝试以下方法，但我做错了什么或者不明白。当我点击我的红色测试平方时，除了我的控制台日志消息之外什么都没发生？

<link href="components/core-transition/core-transition-css.html" rel="import">

<polymer-element name="story-1">

    <template>

        <style>
            :host {
                position:absolute;
                width: 100%;
                height: 100%;
                left: 0px;
                top: 0px;
                font-family: 'RobotoDraft', sans-serif;
            }

            #container {
                position: absolute;
                top:0;
                left:0;
                width:100%;
                height:100%;
            }

            .card {
                position: relative;
                height: 150px;
                width: 150px;
                font-size: 50px;
                margin: 8px;
                background-color: tomato;
                border-radius: 4px;
                cursor: default;
            }
        </style>

        <div id="container" flex horizontal wrap around-justified layout>

            <div class="card" id="animate-me" vertical center center-justified layout on-tap="{{ani}}">
                  test
            </div>

        </div>

    </template>

    <script>
        Polymer('story-1', {

            ani: function() {
                console.log('???')
                var target = document.getElementById('animate-me');

                var meta = document.createElement('core-meta');
                meta.type = 'transition';

                transition = meta.byId('core-transition-fade');
                transition.go(target, true);
            }

        });
    </script>

</polymer-element>

Answer 1

这是我出错的部分

<script>
    Polymer('story-1', {

        ani: function() {
            var target = this.$.animate_me;

            var meta = document.createElement('core-meta');
            meta.type = 'transition';

            transition = meta.byId('core-transition-fade');
            transition.setup(target);
            transition.go(target, true);
        }

    });
</script>

据我所知，文档transition.setup(target, true);未在示例中提及。我必须从演示源代码中找出答案。

（见https://github.com/Polymer/core-transition/issues/4）

我的核心转换示例不起作用？

1 个答案: