-2

Looking for some ideas of what is possible for my project.

I have a container div into which I load content dynamically. If I want the content centered, I have classes that I put on the container div (.center-content) and on the contained divs (#container .center-content). If I don't want them centered I remove the classes with removeClass(). No problem there.

Here's what I need help with: When, say, I remove the .centered classes, the divs will of course move rather abruptly to their new position. I want them to more saunter over all sexy-like.

Is there a css transition strategy I can apply whereby if a class being added or removed causes the div to relocate I can animate it's movement (i.e. slow or fast)?

I've used explicit css animations before as effects, but this seems a little different annnd I don't know what's possible and what's not possible.

Thanks,

Joel
Here's a jsfiddle as an example. http://jsfiddle.net/zdbbf/1/

What I would like is for the transition to be smoother when the centering is removed.

HTML: 

<div id="mycontainer" class='centered'>
    <div id="mycontent" class='centered'>
        <span>I'm a centered div</span>
    </div>
    <button id="mybutton">click to remove centering</button>
</div>

CSS: 

#mycontainer {
    height: 400px;
    width: 400px;
     border: 1px solid grey;
    background-color: grey;
}

#mycontent {
    height: 100px;
    width: 100px;
    border: 1px solid blue;
    text-align: left;
}

.centered {
    display: block;
    text-align: center;
    margin: 0 auto;
}

#container .centered {
    display: inline-block;
    float: none;
    vertical-align: middle;
}

JS:

$("#mybutton").on("click",function() {
    $("#mycontent").removeClass("centered");
});
Joel
  • 647
  • 2
  • 11
  • 22
  • You can transition classes with jQuery, but your question isn't appropriate for SO as it's written. – isherwood Dec 09 '13 at 21:03
  • -isherwood, what information can I add to improve the question? -codehorse, really I'm just looking for a way to soften the transitions which are now a little jarring to the user. – Joel Dec 09 '13 at 21:07
  • SO questions generally call for code. Your question is too broad. – isherwood Dec 09 '13 at 21:29
  • 1
    http://stackoverflow.com/questions/8935372/jquery-how-to-fade-between-classes – isherwood Dec 09 '13 at 21:30
  • well it IS broad, because I'm trying to determine if this is, broadly speaking, possible. But your point is well taken, I added a jsfiddle with a specific example, hopefully that will give more context should anyone care to comment. Thx. – Joel Dec 09 '13 at 21:54

1 Answers1

0

When you know the exact width and position, you can apply a CSS transition on margin 

#mycontent {
    -webkit-transition: margin 2s;
    -ms-transition: margin 2s;
    -moz-transition: margin 2s;
    transition: margin 2s;
    margin-left: 0;
}
#mycontent.centered {
    margin: 0 150px;
}

JSFiddle

Olaf Dietsche
  • 72,253
  • 8
  • 102
  • 198
  • Thanks Olaf. Let me see if I can apply this technique. Typically I would not have a margin like that, but perhaps I can do something similar. – Joel Dec 09 '13 at 23:40
  • Is it correct to say that to do this type of animation you have to start with a known from and to left margin? – Joel Dec 10 '13 at 01:25
  • Yes, at least, this is what I read from the [list of animatable properties](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties#animatable-margin). It seems, you can leave out the `margin-left: 0`. Although, when you replace `150px` with `auto`, it won't do the animation, but jump to the target position. – Olaf Dietsche Dec 10 '13 at 06:54