CODEWITHSUNDEEP
css
Dragos
Dragos

Reputation: 776

CSS transition fill property works only one way

I have a container that holds a SVG. On click, the SVG changes with some other SVG.

The first SVG has 

.filled {
  fill: blue;
  transition: all .5s ease-in;
}

The other one is actually the same image but without fill.

.unfilled {
  transition: all .5s ease-in;
}

When transitioning from the unfilled to the filled SVG, the animation works. But it does not work the other way around. (the transition is instant)

Can anyone help me understand what's going wrong?

Upvotes: 1

Views: 286

Answers (2)

Julian
Julian

Reputation: 763

I just changed the class using jQuery and it seems to work.

JS

$('#changeme').on("click", function() {
    $("#mySvg").attr('class', 'unfilled');
});

HTML

 <svg width="100" height="100">
       <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" id="mySvg" class="filled" />
  </svg>
  <button id="changeme">Change me</button>

Upvotes: -1

Petr
Petr

Reputation: 92

Change ease-in to ease-in-out.

More info on transitions is available here: http://www.w3schools.com/css/css3_transitions.asp

Upvotes: 1

Related Questions