2017-11-23 17 views
2

divを右から左にクリックしてスライドさせようとしています。そしてそれを閉じて、CSS3のトランジションとアニメーションを使用して、閉じるボタンを右クリックします。CSS3アニメーション右から左にdivをスクロールするボタンのオンクリック

ここ

をいじるためのリンクです:Click Here

サンプルCSS:

.selected { 
    animation: slide-in 0.5s forwards; 
    -webkit-animation: slide-in 0.5s forwards; 
} 

.dismiss { 
    animation: slide-out 0.5s forwards; 
    -webkit-animation: slide-out 0.5s forwards; 
} 

誰かが私がここでやって何が間違っ私に説明できますか?どのようにそれを解決するには?

おかげ

答えて

2

$('#showFilePanel').click(function(event) { 
 
    if ($('.notification-container').hasClass('dismiss')) { 
 
    $('.notification-container').removeClass('dismiss').addClass('selected').show(); 
 
    } 
 
    event.preventDefault(); 
 
}); 
 

 
$('#closeFilePanel').click(function(event) { 
 
    if ($('.notification-container').hasClass('selected')) { 
 
    $('.notification-container').removeClass('selected').addClass('dismiss'); 
 
    } 
 
    event.preventDefault(); 
 
});
html, 
 
body { 
 
    overflow: hidden; 
 
    max-width: 100% 
 
} 
 

 
.notification-container { 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    width: 300px; 
 
    display: none; 
 
    height: 100%; 
 
    overflow: hidden; 
 
    background: #107b10; 
 
    z-index: 999; 
 
    transform: translateX(100%); 
 
    -webkit-transform: translateX(100%); 
 
} 
 

 
.selected { 
 
    animation: slide-in 0.5s forwards; 
 
    -webkit-animation: slide-in 0.5s forwards; 
 
} 
 

 
.dismiss { 
 
    animation: slide-out 0.5s forwards; 
 
    -webkit-animation: slide-out 0.5s forwards; 
 
} 
 

 
@keyframes slide-in { 
 
    0 { 
 
    -webkit-transform: translateX(100%); 
 
    } 
 
    100% { 
 
    -webkit-transform: translateX(0%); 
 
    } 
 
} 
 

 
@-webkit-keyframes slide-in { 
 
    0 { 
 
    transform: translateX(100%); 
 
    } 
 
    100% { 
 
    transform: translateX(0%); 
 
    } 
 
} 
 

 
@keyframes slide-out { 
 
    0% { 
 
    transform: translateX(0%); 
 
    } 
 
    100% { 
 
    transform: translateX(100%); 
 
    } 
 
} 
 

 
@-webkit-keyframes slide-out { 
 
    0% { 
 
    -webkit-transform: translateX(0%); 
 
    } 
 
    100% { 
 
    -webkit-transform: translateX(100%); 
 
    } 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="notification-container dismiss"> 
 
</div> 
 

 
<a id="showFilePanel">Open</a> 
 
<a id="closeFilePanel">Close</a>

あなたが定義した実際のアニメーション名にアニメーション名を変更し、誤ってanimation-nameとしてselecteddismissを使用している:

.selected { 
    animation: slide-in 0.5s forwards; 
    -webkit-animation: slide-in 0.5s forwards; 
} 

.dismiss { 
    animation: slide-out 0.5s forwards; 
    -webkit-animation: slide-out 0.5s forwards; 
} 

@keyframes slide-in { 
    0 { -webkit-transform: translateX(-100%); } 
    100% { -webkit-transform: translateX(0%); } 
} 

@-webkit-keyframes slide-in { 
    0 {transform: translateX(-100%); } 
    100% { transform: translateX(0%); } 
} 

@keyframes slide-out { 
    0% { transform: translateX(0%); } 
    100% { transform: translateX(-100%); } 
} 

@-webkit-keyframes slide-out { 
    0% { -webkit-transform: translateX(0%); } 
    100% { -webkit-transform: translateX(-100%); } 
} 

変更(@keyframes dismi開き、右側から閉じるようにスニペットを追加:SS & @keyframesは

編集(@keyframesにおけるスライド及び@keyframesスライドアウト)に)を選択しました。

+0

大変悪い:(現在は動作していますが、左から右にスライドしています)右から左にスライドさせるにはどうすればいいですか? – Veer

+0

@Veerチェックアウトスニペットを追加しました –

関連する問題