Codedrops透视导航

Codedrops perspective navigation

本文关键字：导航 透视 Codedrops      更新时间：2023-09-26

我使用的是本教程中的代码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/

您可以有两种方式，单击容器或单击固定菜单图标都会将其恢复正常。

这是演示

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();
})();

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

有两个事件侦听器

showMenu.addEventListener( clickevent, function( ev ) {

和

containerMain.addEventListener( clickevent, function( ev ) {

我只是简单地将它们合并，并使用"containerMain"中的"if"条件，即：

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 );
        }
    });
相关文章：