Question

尝试为购物车做一些简单的动画，但似乎在几个高级问题上遇到了障碍。

我希望能够在我的购物车为空时执行动画，因此我在“已更改”属性中为我的购物车属性添加了一些编码。

但是，即使页面处于非活动状态，似乎也会调用已更改的事件处理程序，我只想在此核心动画页面处于活动状态时执行

这是我的代码，我使用“ document.querySelector（'html / deep / #cart [active]'） ”的部分无效，而且看起来很丑陋。我怎样才能更好地做到这一点？

isloaded: false,
    created : function(){
       this.isloaded = true;
    },
    cartChanged: function() {
        //hide cart if no items  
        if(document.querySelector('html /deep/ #cart[active]')){
            console.log("cart.length:" + this.cart.length + " isloaded: " + this.isloaded)

            if (this.cart.length == 0) {
                if (this.isloaded) {
                    this.$.carthasitems.setAttribute('hidden', '');                   
                } else {
                    this.$.cartemptycontainer.classList.add('transparent');

                    this.$.cartanimations.toggleSlide(
                        this.$.carttotalscontainer, 
                        .5,
                        this.$.cartanimations.fadeInUp(this.$.cartemptycontainer, .5)
                        );
                }               
            }
            this.isloaded = false;
        }
    }

先谢谢了，大卫

Answer 1

听起来你在提到核心动画页面的基础上使用了Polymer 0.5。首先，你可能会获得更好的支持和支持。移动到Polymer 1.0，这是未来支持的库。

如果你转移到Polymer 1.0＆amp;将您的应用程序基于https://github.com/polymerelements/polymer-starter-kit，然后它包含一个基本路由器，您可以利用它来了解哪个页面（即路由）处于活动状态。

Polymer Framework：如何使用属性“已更改”事件处理程序确定活动页面

1 个答案: