CODEWITHSUNDEEP
jquerycssclassanimation
user113630
user113630

Reputation: 13

css transition class remove steps

I am trying to create a button that opens a side panel. the button has two states: open and closed, and has animation keyframes to transition between the two. i've used the steps() easing function and a sprite sheet to achieve this. A class is added with jQuery and the button animates correctly, but when the class is removed it jumps to the closed state instead of animating.

You can view it here: 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;
}

I tried to add a different animation value to the original class but that just seemed to always break it by animating on page load then not at all when clicked. I've tried changing and adding a bunch of different things to the animation value but none of them effected the transition back to closed, and now i'm out of ideas...

Upvotes: 0

Views: 118

Answers (1)

Yandy_Viera
Yandy_Viera

Reputation: 4380

The thin is you already are only animate when the button has the class .button-open and the animation don't have default reverse so you can use:

$(".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("https://i.sstatic.net/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>

But I really recommend you use transitions like this:

$(".button").click(function() {
    $(this).toggleClass("button-open");
})
.button{
    height: 100px;
    width: 100px;
    image-rendering: pixelated;
    background-image: url("https://i.sstatic.net/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>

Upvotes: 2

Related Questions