我的问题非常简单，但我无法确定它来自哪里。
我有一个按钮。当我点击它时，它向左滑动，另一个按钮以CSS动画方式取代它。
这是我的代码：
.form-anim-right-click {
position: relative;
overflow: hidden;
}
.form-anim-right-click > .form-group {
width: 200%;
}
.form-anim-right-click > .form-group > .btn {
width: 50%;
display: inline-block;
float: left;
-o-transition: transform 0.3s ease-out;
-webkit-transition: transform 0.3s ease-out;
transition: transform 0.3s ease-out;
}
.form-anim-right-click > .form-group > .btn:focus {
-o-transform: translate(-100%, 0);
-webkit-transform: translate(-100%, 0);
-ms-transform: translate(-100%, 0);
transform: translate(-100%, 0);
}
.form-anim-right-click > .form-group > .btn:focus + .form-slide {
-o-transform: translate(-100%, 0);
-webkit-transform: translate(-100%, 0);
-ms-transform: translate(-100%, 0);
transform: translate(-100%, 0);
}
.form-anim-right-click .form-slide {
width: 50%;
display: inline-block;
float: left;
-o-transition: transform 0.3s ease-out;
-webkit-transition: transform 0.3s ease-out;
transition: transform 0.3s ease-out;
}
.form-anim-right-click .form-slide > .row {
margin-left: 0;
margin-right: 0;
padding: 0 4px;
}
.form-anim-right-click .form-slide > .row > div {
display: inline-block;
}
.form-anim-right-click .form-slide > .row > [class^="col-"] {
padding: 0 2.66666667px;
}
.form-anim-right-click .form-slide > .row label {
margin-bottom: 0;
line-height: 1.6em;
font-family: "SourceSansPro", Helvetica, Arial, sans-serif;
color: #01273c;
}
.form-anim-right-click .form-slide > .row .btn-xs {
padding-left: 4px;
padding-right: 4px;
z-index: 10000;
}<div class="form-anim-right-click">
<div class="form-group">
<button type="button" class="btn btn-xs btn-block btn-primary">Delete</button>
<div class="form-slide">
<div class="row">
<div>
<button type="button" class="btn btn-xs btn-block btn-primary" onclick="alert('OK');">
Yes
</button>
</div>
<div>
<button type="button" class="btn btn-xs btn-block btn-secondary">
No
</button>
</div>
<div>
<input type="text">Text
</button>
</div>
</div>
</div>
</div>
</div>你也可以在JFiddle中看到它。
当我点击一个新按钮时，我想打开一个JS警报。但是当我点击它时，什么也没有发生，就好像我没有点击这个按钮一样。
PS：我对CSS还很陌生，如果你发现其他问题，请随意纠正我！
有人有想法吗？
谢谢大家！
[编辑] 感谢您所有的答案！
到目前为止，我认为@alireza safian的解决方案最适合我的情况。我更喜欢纯CSS，但似乎非常困难。就像我在评论中读到的那样，似乎焦点事件是问题的根源。如果我点击“是”，则模糊事件在单击事件之前触发。 “删除”按钮回来了，但“是”没有被认为是已单击。
我想补充一件我忘记说明的事情：如果我在按钮外单击，我需要“删除”按钮重新出现。这就是为什么我使用焦点事件的原因。
为了获得两个事件（"delete"的模糊和"yes"的单击），我修改了alireza safian的jsfiddle，并获得了这个结果：http://jsfiddle.net/86nhdrno/2/
它完成了工作，但我不太喜欢使用超时...