Question

我正在使用优秀的animate.css库来制作动画。我想知道是否有可能创造一个＆＃34;偷看＆＃34;并且＆＃34;偷看＆＃34;效果类似于SlideIn / SlideOut，但有以下区别：

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

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

换句话说，不同之处在于peek不会超出父对象边界。我尝试将剪辑/剪辑路径添加到动画元素，但看起来不像translate3d考虑到这一点。

animate.css的slideInRight / OutRight代码非常简单 - 它将X移动100％ - 我希望确保它在移出父框架时被裁剪。

我已经设置了一个codepen来说明这一点 - 感谢任何建议 http://codepen.io/pliablepixels/pen/pgxqOX

＆＃13;

body {
  margin: 0px;
  width: 100%;
}
.header {
  background-color: red;
  color: white;
}
.animated {
  animation-duration: 2.5s;
  animation-fill-mode: both;
  animation-iteration-count: infinite;
}
@keyframes slideOutRight {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    visibility: visible;
    transform: translate3d(100%, 0, 0);
  }
}
.slideOutRight {
  animation-name: slideOutRight;
}

＆＃13;

<div style="position:relative; width:200px;overflow:hidden">
  <img src="http://dummyimage.com/200x200/000/fff" />
  <div style="position:absolute;bottom:1%;right:0%" class="animated slideOutRight header">Stop Right There!</div>
</div>

＆＃13;

Answer 1

您可以使用overflow property隐藏所有超出父div的孩子在父div上添加overflow:hidden;，如下所示：

＆＃13;

body {
  margin: 0px;
  width: 100%;
}
.wrap {
  position:relative; 
  width:200px;
  overflow: hidden;
}
.header {
  position:absolute;
  bottom:1%;
  right:0%;
  background-color: red;
  color: white;
}
.animated {
  animation-duration: 2.5s;
  animation-fill-mode: both;
  animation-iteration-count: infinite;
}
@keyframes slideOutRight {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    visibility: hidden;
    transform: translate3d(100%, 0, 0);
  }
}
.slideOutRight {
  animation-name: slideOutRight;
}

＆＃13;

<div class="wrap">
  <img src="http://dummyimage.com/200x200/000/fff" />
  <div class="animated slideOutRight header">Stop Right There!</div>
</div>

＆＃13;

在旁注中，我还删除了内联样式并将其放入CSS样式表中。

使用animate.css创建一个效果器

1 个答案: