2

Using bootstrapper 3 panel and ng-switch with a sliding animation: Plunker

I want to only show the animation inside the panel, when the animation plays the div is showing past the panel borders.

What am I missing in this Plunker so that the animation only shows inside the panel div?

The result that I am looking for is somewhat like this sample: slider-css3-transition-animation

But I cant seem to get a grasp of how to structure my css.

Community
  • 1
  • 1
qorsmond
  • 1,246
  • 1
  • 18
  • 29

1 Answers1

4

You can resolve your problem by adding in your css :

.panel {
  overflow:hidden;
}

Here is the result in your Plunkr

meriadec
  • 2,953
  • 18
  • 20
  • the resizing of the panel when switching looks a little buggy.. maybe enough to ask another question :) – meriadec Nov 20 '13 at 20:32
  • Created a new question regarding the resizing of the panel when switching: [ng-switch with animation resizing looks buggy](http://stackoverflow.com/questions/20115016/ng-switch-with-animation-resizing-looks-buggy) – qorsmond Nov 21 '13 at 07:36
  • How can I change the code so that when the page jsut loaded the first panel is already loaded and not sliding? – Spearfisher Apr 14 '14 at 22:07