css 过渡类删除步骤

Question

我正在尝试创建一个打开侧面板的按钮。该按钮有两种状态：打开和关闭，并有动画关键帧在两者之间转换。我使用了 steps() 缓动函数和一个精灵表来实现这一点。使用 jQuery 添加了一个类，并且按钮可以正确动画，但是当该类被删除时，它会跳转到关闭状态而不是动画。

您可以在这里查看：https://jsfiddle.net/eukf9snh/1/

@keyframes contactAnimate {
   100% { background-position: -210px; }
}
.button{
    height: 26px;
    width: 30px;
    position: fixed;
    top: 50px;
    right: 100px;
    image-rendering: pixelated;
    background-image: url("icons/mail-icon.png");
    transform: scale(2) translateX(-25%);
    z-index: 1;
    background-repeat: no-repeat;
}
.button-open{
    animation: contactAnimate 0.3s steps(7) 1 both;
}

我尝试向原始类添加不同的动画值，但这似乎总是通过在页面加载时制作动画来破坏它，然后在点击时根本没有。我已经尝试更改并向动画值添加一堆不同的东西，但它们都没有影响到关闭的过渡，现在我没有想法......

Answer 1

只有在按钮具有 .button-open 类且 animation 没有默认反向功能时，您才具有动画效果，因此您可以使用：

$(".button").click(function() {
    $(this).toggleClass("button-open");
})

@-webkit-keyframes contactAnimate {   /*webkit*/
    from { background-position: 0}
    to { background-position: -210px; }
}
@keyframes contactAnimate {
    from { background-position: 0}
    to { background-position: -210px; }
}

@-webkit-keyframes contactAnimateBack {    /*webkit*/
    from { background-position: -210px; }
    to { background-position: 0 }
}
@keyframes contactAnimateBack {    
    from { background-position: -210px; }
    to { background-position: 0 }
}

.button{
    height: 100px;
    width: 100px;
    image-rendering: pixelated;
    background-image: url("http://i.stack.imgur.com/gijdH.jpg?s=328&g=1");
    transform: scale(2) translateX(-25%);
    z-index: 1;
    background-repeat: no-repeat;
    -webkit-animation: contactAnimateBack 0.3s steps(7) 1 both;   /*webkit*/
    animation: contactAnimateBack 0.3s steps(7) 1 both;
}
.button-open{
    -webkit-animation: contactAnimate 0.3s steps(7) 1 both;   /*webkit*/
    animation: contactAnimate 0.3s steps(7) 1 both;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<p>Click the img</p>
<div class="button"></div>

但我真的建议你使用这样的过渡：

$(".button").click(function() {
    $(this).toggleClass("button-open");
})

.button{
    height: 100px;
    width: 100px;
    image-rendering: pixelated;
    background-image: url("http://i.stack.imgur.com/gijdH.jpg?s=328&g=1");
    transform: scale(2) translateX(-25%);
    z-index: 1;
    background-repeat: no-repeat;
    transition: .3s
}
.button-open{
    background-position: -210px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="button"></div>