Cropping an animation in a way this is compatible with column-count

问题

This is related to Creating a peek in effect with animate.css which was answered via using overflow:hidden, but does not work with column-count:

I am using the excellent animate.css library for animations. I was wondering if its possible to create a "peek in" and "peek out" effect that is similar to the SlideIn/SlideOut but with the following difference:

                     slideOutRight
   +-------------+     +-------------+
   |             |     |             |
   |             |     |             |
   |   +---------+     |         +---+----+
   |   |  anim   |     |         |  anim  |
   |   +---------+     |         +---+----+
   |             |     |             |
   +-------------+     +-------------+

                      peekOutRight
   +-------------+     +--------------+
   |             |     |              |
   |             |     |              |
   |   +---------+     |         +----+
   |   |  anim   |     |         |  an|
   |   +---------+     |         +----+
   |             |     |              |
   +-------------+     +--------------+

In other words, the difference is that peek does not go out of the parent object boundaries. I've tried adding clip/clip-path to the anim element but it does not look like translate3d takes that into account.

The slideInRight/OutRight code of animate.css is pretty straighforward - It's moving X by 100% - I'd like to make sure it gets cropped as it moves out of the parent frame.

I've setup a codepen to illustrate this in action - would appreciate any advice http://codepen.io/pliablepixels/pen/pgxqOX

The caveat is that it must work with -column-count. as you see in the codepen, the moment you use column-count, the 2nd column does not show the header

Added Clarification on why I need it to work with columns: I need to pack the frames so that odd sized frames are not arranged by row. This codepen illustrates the issue of using flex-row vs. column-count -http://codepen.io/pliablepixels/pen/MKPLBp

If you switch to byrow you'll see images are aligned in a way that the row takes up the height of the largest image, which means if you reduce the browser width,"D" goes to row 3 instead of going under "C". Switch to column mode and it packs in better.

来源：https://stackoverflow.com/questions/35255298/cropping-an-animation-in-a-way-this-is-compatible-with-column-count

标签

css

animate.css