Jquery 从左滑入页面

我试图从左边提取幻灯片的效果，如果在演示中显示，我不知道是什么问题，但它根本不起作用

CSS:

JS:

我拉了一把小提琴-->

我想实现的是，在

中单击我的菜单时，会出现一个单独的页面，可能是页面宽度的50%。
只是属性问题（数据页面名称不在html中），以及在js上获取属性的方法；）



数据页类型=“s-page”数据页类型=“随机还原页”必须为
数据页类型=“s-page”数据页名称=“随机还原页”
//js
$this.attr（'data-page-type'）

.slidePageInFromLeft {
  -webkit-animation: slidePageInFromLeft .8s cubic-bezier(.01,1,.22,.99) 1 0.25s normal forwards;
  -o-animation: slidePageInFromLeft .8s cubic-bezier(.01,1,.22,.99) 1 0.25s normal forwards;
  animation: slidePageInFromLeft .8s cubic-bezier(.01,1,.22,.99) 1 0.25s normal forwards
}
@keyframes slidePageInFromLeft {
  0% {
    opacity: 0
  }

  30% {
    opacity: 1
  }

  100% {
    opacity: 1;
    left: 0
  }
}
@-webkit-keyframes slidePageInFromLeft {
  0% {
    opacity: 0
  }

  30% {
    opacity: 1
  }

  100% {
    opacity: 1;
    left: 0
  }
}
@-o-keyframes slidePageInFromLeft {
  0% {
    opacity: 0
  }

  30% {
    opacity: 1
  }

  100% {
    opacity: 1;
    left: 0
  }
}

$('.tile').each(function(){
    var $this= $(this),
        pageType = $this.data('page-type'),
        page = $this.data('page-name');

    $this.on('click',function(){
      if(pageType === "s-page"){
          $('.'+page).addClass('slidePageInFromLeft').removeClass('slidePageBackLeft');
        }
    });
  });

$('.s-close-button').click(function(){
      $(this).parent().removeClass('slidePageInFromLeft').addClass('slidePageBackLeft');
  });

<!--html -->
    data-page-type="s-page" data-page-type="random-restored-page" must be
    data-page-type="s-page" data-page-name="random-restored-page"
    //js
$this.attr('data-page-type')