对于不同的过渡开/关类，但相同的属性

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); 
    } 
}