CSS3アニメーション右から左にdivをスクロールするボタンのオンクリック

Question

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

ここ

をいじるためのリンクです：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; 
} 

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

おかげ

Answer 1

$('#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としてselectedとdismissを使用している：

.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スライドアウト）に）を選択しました。