CODEWITHSUNDEEP
htmlcsssass
Tamas Koos
Tamas Koos

Reputation: 63

One way transition delay

I have a sidebar with a logo on the top. Next to the sidebar is a button, which is used to switch between the normal and compact class of the sidebar. This changes the width of the sidebar, so I added a 0.25s transition-duration, so it has a nice opening and closing animation. The buttonpress also changes the source of the logo. What I want to do is when I first click on the button (in normal view) it changes the image instantly, but when I click on it a second time (in compact view) the image has a 0.25s transition-delay so it only changes after the sidebar has finished opening. Is there a way I can achieve this?

Upvotes: 5

Views: 3211

Answers (2)

mwl
mwl

Reputation: 1488

sidebar {
  background: red;
  transition: background 1s;
}

sidebar.active {
  background: pink;
  transition: none;
}
<div>click</div>
<sidebar>
  lorem ipsum
</sidebar>

Upvotes: 3

Luke G.
Luke G.

Reputation: 587

Are you open to using jQuery (or vanilla Javascript, for that matter)?

(psuedo code/untested)

in css:

.sidebar-logo.delay-transition {
    transition-delay: 0.25s;
 }

in script:

$('.my-special-button').on('click', function() {
    $('.sidebar-logo').addClass('delay-transition');
})

So, as soon as you click the button the first time it adds a class to give the sidebar a delay. It will continue to behave that way for each subsequent click.

Upvotes: 0

Related Questions