對於不同的過渡開/關類，但相同的屬性

Question

我有翻譯本身在一個簡單的過渡一個div：

div{ 
    transform: translate3d(0, -100%, 0); 
    transition: all .5s; 
} 

div.active{ 
    transform: translate3d(0, 0, 0); 
} 

然後，我與切換JS類和它完美的作品。這將執行以下操作：

On --> Slide div down 
Off --> Slide div up 

我想要做的是：

On --> Slide div down 
Off --> Slide div down again 

有沒有辦法來實現這一目標？

編輯：下面是什麼它做了演示：https://jsfiddle.net/bwzy89oq/（點擊任何地方）

Answer 1

這確實你需要什麼，排序的，但它開始播放動畫。我正在研究如何邏輯：

div { 
    width: 100%; 
    height: 100%; 
    position: fixed; 
    top: 0; 
    left: 0; 
    transform: translate3d(0, 100%, 0); 
    background: black; 
    transition: all .5s ease-in-out; 
    animation: slider2 .5s forwards; 
} 

div.active { 
    animation: slider .5s forwards; 
    /*transform: translate3d(0, 0, 0);*/ 
} 

@keyframes slider { 
    from { 
    transform: translate3d(0, -100%, 0); 
    } 
    to { 
    transform: translate3d(0, 0, 0); 
    } 
} 


@keyframes slider2 { 
    from { 
    transform: translate3d(0, 0, 0); 
    } 
    to { 
    transform: translate3d(0, 100%, 0); 
    } 
}