Question

我正在使用本教程中的代码http://tympanus.net/Development/PerspectivePageViewNavigation/

并希望稍微编辑它。在演示中，它有一个按钮，您按下并且透视图发生变化，返回普通视图的唯一方法是单击容器。但是我想用固定的菜单图标来做这个，所以先点击打开导航，然后再点击隐藏。我无法将第二个按钮点击链接到容器点击。

我添加了一个jsfiddle来展示我拥有的，任何人都有任何想法？谢谢一堆

containerMain.addEventListener( clickevent, function( ev ) {
if( classie.has( perspectiveWrapper, 'animate') ) {
var onEndTransFn = function( ev ) {
if( support && ( ev.target.className !== 'container' || ev.propertyName.indexOf( 'transform' ) == -1 ) ) return;
this.removeEventListener( transEndEventName, onEndTransFn );
classie.remove( perspectiveWrapper, 'modalview' );
document.body.scrollTop = document.documentElement.scrollTop = docscroll;                   
contentWrapper.style.top = '0px';
};
if( support ) {
perspectiveWrapper.addEventListener( transEndEventName, onEndTransFn );
}
else {
onEndTransFn.call();
}
classie.remove( perspectiveWrapper, 'animate' );
}
});

http://jsfiddle.net/Avh25/

Answer 1

这是小提琴：http://jsfiddle.net/Avh25/1/

有两个事件监听器

showMenu.addEventListener( clickevent, function( ev ) {

和

containerMain.addEventListener( clickevent, function( ev ) {

我只是将它们合并并使用＆＃34;如果＆＃34;条件来自＆＃34; containerMain＆＃34;这是：

if( classie.has( perspectiveWrapper, 'animate') ) {

最终结果如下：

    showMenu.addEventListener( clickevent, function( ev ) {
        if( classie.has( perspectiveWrapper, 'animate') ) {
                var onEndTransFn = function( ev ) {
                if( support && ( ev.target.className !== 'container' || ev.propertyName.indexOf( 'transform' ) == -1 ) ) return;
                this.removeEventListener( transEndEventName, onEndTransFn );
                classie.remove( perspectiveWrapper, 'modalview' );
                // mac chrome issue:
                document.body.scrollTop = document.documentElement.scrollTop = docscroll;
                // change top of contentWrapper
                contentWrapper.style.top = '0px';
            };
            if( support ) {
                perspectiveWrapper.addEventListener( transEndEventName, onEndTransFn );
            }
            else {
                onEndTransFn.call();
            }
            classie.remove( perspectiveWrapper, 'animate' );
        }else{
            ev.stopPropagation();
            ev.preventDefault();
            docscroll = scrollY();
            // change top of contentWrapper
            contentWrapper.style.top = docscroll * -1 + 'px';
            // mac chrome issue:
            document.body.scrollTop = document.documentElement.scrollTop = 0;
            // add modalview class
            classie.add( perspectiveWrapper, 'modalview' );
            // animate..
            setTimeout( function() { classie.add( perspectiveWrapper, 'animate' ); }, 25 );
        }
    });

Answer 2

您可以同时使用两种方式，单击容器或单击固定菜单图标，这两种方式都会使其恢复正常。

Here is Demo

showMenu.addEventListener( clickevent, function( ev ) {
      if( classie.has( perspectiveWrapper, 'animate') ) {
            var onEndTransFn = function( ev ) {
                 if( support && ( ev.target.className !== 'container' || ev.propertyName.indexOf( 'transform' ) == -1 ) ) return;
                 this.removeEventListener( transEndEventName, onEndTransFn );
                 classie.remove( perspectiveWrapper, 'modalview' );
                 // mac chrome issue:
                 document.body.scrollTop = document.documentElement.scrollTop = docscroll;
                 // change top of contentWrapper
                 contentWrapper.style.top = '0px';
            };
            if( support ) {
                 perspectiveWrapper.addEventListener( transEndEventName, onEndTransFn );
                 }
                 else {
                    onEndTransFn.call();
                 }
                classie.remove( perspectiveWrapper, 'animate' );
      }else{
                ev.stopPropagation();
                ev.preventDefault();
                docscroll = scrollY();
                // change top of contentWrapper
                contentWrapper.style.top = docscroll * -1 + 'px';
                // mac chrome issue:
                document.body.scrollTop = document.documentElement.scrollTop = 0;
                // add modalview class
                classie.add( perspectiveWrapper, 'modalview' );
                // animate..
                setTimeout( function() { classie.add( perspectiveWrapper, 'animate' ); }, 25 );
            }
        });

        containerMain.addEventListener( clickevent, function( ev ) {
            if( classie.has( perspectiveWrapper, 'animate') ) {
                var onEndTransFn = function( ev ) {
                    if( support && ( ev.target.className !== 'container' || ev.propertyName.indexOf( 'transform' ) == -1 ) ) return;
                    this.removeEventListener( transEndEventName, onEndTransFn );
                    classie.remove( perspectiveWrapper, 'modalview' );
                    // mac chrome issue:
                    document.body.scrollTop = document.documentElement.scrollTop = docscroll;
                    // change top of contentWrapper
                    contentWrapper.style.top = '0px';
                };
                if( support ) {
                    perspectiveWrapper.addEventListener( transEndEventName, onEndTransFn );
                }
                else {
                    onEndTransFn.call();
                }
                classie.remove( perspectiveWrapper, 'animate' );
            }
        });

        perspectiveWrapper.addEventListener( clickevent, function( ev ) { return false; } );
    }

    init();

})();

Codrops透视导航

2 个答案: