頁面從左邊滑入

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 - >http://jsfiddle.net/x68HL/

我想實現的是一個單獨的頁面將出現在我的菜單中點擊在<li>中，可能是頁面寬度的50％。

Answer 1

只是屬性的煩惱（數據頁名稱不是在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')