为什么活门先打开，然后再打开

Why is the flap opening then closing before opening?

本文关键字：然后 为什么      更新时间：2023-09-26

我正在尝试使用这个CodePen（见下文），它是一个信封效果。

点击按钮时顶部挡板应打开，然后发送表单时顶部挡板关闭。

然而，问题是：当打开/关闭时，它会产生双重影响。顶部挡板将打开，然后在信封后面折叠，然后返回"打开"状态。当它关闭时，情况正好相反。

如何移除打开->关闭->打开的效果？

这是我正在用的电笔。

http://codepen.io/permanentinc/pen/muFxK

我相信罪魁祸首是以下代码：

.close_sesame {
 transform: rotatex(180deg);
 z-index: 9999 ;
}

我发现了这个问题。这是过渡计时功能，所以我删除了以下粗体。。。

.top_flap {
    top: -245px;
  left: -15px;
  position: absolute;
  height: 245px;
  width: 800px;
  overflow-y: hidden;
  -webkit-perspective: 500;
  -moz-perspective: 500;
  -ms-perspective: 500;
  -o-perspective: 500;
  perspective: 500;
  -webkit-transform-origin: bottom;
  -moz-transform-origin: bottom;
  -ms-transform-origin: bottom;
  -o-transform-origin: bottom;
  transform-origin: bottom;
  -webkit-transition: all 500ms 200ms linear;
  -moz-transition: all 500ms 200ms linear;
  -o-transition: all 500ms 200ms linear;
  transition: all 500ms 200ms linear;
  **Start of Removed**--------------------------------
  -webkit-transition-timing-function: cubic-bezier(0.6, 1.3, 0.2, 2.8);
  -moz-transition-timing-function: cubic-bezier(0.6, 1.3, 0.2, 2.8);
  -o-transition-timing-function: cubic-bezier(0.6, 1.3, 0.2, 2.8);
  transition-timing-function: cubic-bezier(0.6, 1.3, 0.2, 2.8);
  **End of Removed**---------------------
  z-index: 1;
}

这是包含修复程序的分叉代码笔。

http://codepen.io/SandManMoshi/pen/bVMwNx/

相关文章：