Question

我试图提取slide in from left效果，如果在this演示中显示，我不知道什么是错的，但它根本不起作用。

CSS：

.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
  }
}

JS：

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

我做了一个jfiddle - ＆gt; http://jsfiddle.net/x68HL/

我想要实现的是，在<li>点击我的菜单时会出现一个单独的页面，可能是页面宽度的50％。

Answer 1

只是属性问题（data-page-name不在html中），以及获取js属性的方法;）

http://jsfiddle.net/x68HL/2/

<!--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')

页面从左侧滑入

1 个答案: