Question

I am using YUI panel for dipslaying some contents on the ui which has structure somehting like below. I am using YUI Panel fade effect to hide the panel when closed.

<div ... YUI panel related stuff>
   <div class="hd"
   <div class="bd"
      <div class="someinformation" >
      <div class="image"><img ... /><div>
      <div class="image"><img ... /><div>
      <div class="image"><img ... /><div>
      <div class="image"><img ... /><div>
...
...

Reecntly i have tried to integrate the CSS3 Transitions into the UI for images. As per functionality every image has the delete button clicking on which user is able to remove the image from the system. To add some animation i have added following CSS class changes.

.image{
    ...
    ... 
    -moz-trnansition:all 1s;
    ...

}

When user click on the close button i am setting the opacity of the image division to 0 which is giving it nice effect.

However then problem starts. When user clicks on close button for the YUI panel panel hides and once its hidden i found that the transition for the images starts and then it hides after 1 seconds. Which is kind of ungly that panel is closed and after that only the images show up again on the screen and hides slowly.

Sure it has to do something with the transition as after remvoing transition it works just fine. So if anyone has faced it or know how to fix it please give your inputs.

Answer 1

Perhaps more creative CSS rules would work, along with some YUI configuration.

Unfortunately, I don’t know YUI, but my idea is to set a class on the container div for the panel ”before” it closes, and removes it after it has completely closed. Call the class “closing” or similar.

e.g. in pseudo-code:

YUI.Panel.setOptions({ beforeClose: function() {
    thisYuiPanel.addClass('closing');
}, afterClose: function() {
    thisYuiPanel.removeClass('closing');
});

Then in your CSS, only have the CSS3 animation run if the panel isn’t closing.

.image {
    ...
    ... 
    -moz-transition:all 1s;
    ...
}

.closing .image{
    -moz-transition:all 0s;
}