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>

css过渡类删除步骤

1 个答案: