转换后的 CSS 点击

Question

我的问题很简单，但是想不通是从哪里来的。

我有一个按钮。当我单击它时，它会向左滑动，并用另一个按钮代替它，并带有 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，但这似乎非常困难。就像我在 cmets 中读到的那样，似乎焦点事件是问题的根源。如果我单击“是”，则在单击事件之前触发模糊事件。 “删除”按钮回来了，但“是”不被认为是点击了。

我想补充一件我忘记准确的事情：如果我在按钮外部单击，我需要重新出现“删除”按钮。这就是我使用焦点事件的原因。

为了获取这两个事件（模糊“删除”并单击“是”），我修改了 alireza safian 的 jsfiddle，我得到了这个结果：http://jsfiddle.net/86nhdrno/2/

它可以完成这项工作，但我不太喜欢使用超时...

Answer 1

OP 问题：

纯css可以实现我想要的情况吗？

回答：不，不是。

问题：

有哪些替代方法？

回答：可以通过javascript、jQuery等方式完成。

jQuery 解决方案：

Jsfiddle

$('.delete').click(

  function() {
    $(this).addClass("active");
  });

$('.form-slide button').click(

  function() {
    $('.delete').removeClass("active");
    alert($(this).text());
  });

.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.active {
  -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.active + .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;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="form-anim-right-click">
  <div class="form-group">
    <button type="button" class="btn btn-xs btn-block btn-primary delete ">Delete</button>
    <div class="form-slide">
      <div class="row">
        <div>
          <button type="button" class="btn btn-xs btn-block btn-primary">Yes</button>
        </div>
        <div>
          <button type="button" class="btn btn-xs btn-block btn-secondary">No</button>
        </div>
        <div>
          <input type="text">Text</div>
      </div>
    </div>
  </div>
</div>

Javascript 解决方案：

Jsfiddle

var deleteButton = document.getElementById("delete");
var yesButton = document.getElementById("yes");
var noButton = document.getElementById("no");

deleteButton.addEventListener("click", deleteButtonFunction);
yesButton.addEventListener("click", yesButtonFunction);
noButton.addEventListener("click", noButtonFunction);

function deleteButtonFunction() {
  deleteButton.classList.add("active");
}

function yesButtonFunction() {
  alert("yes");
  deleteButton.classList.remove("active");
}

function noButtonFunction() {
  alert("no");
  deleteButton.classList.remove("active");
}

.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.active {
  -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.active + .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 " id="delete">Delete</button>
    <div class="form-slide">
      <div class="row">
        <div>
          <button id="yes" type="button" class="btn btn-xs btn-block btn-primary">Yes</button>
        </div>
        <div>
          <button id="no" type="button" class="btn btn-xs btn-block btn-secondary">No</button>
        </div>
        <div>
          <input type="text">Text</div>
      </div>
    </div>
  </div>
</div>

Answer 2

好的，所以我的理解是因为您使用的是焦点，焦点在注册点击之前就丢失了。所以这是一个解决方案，我把@alireza safian 的答案拿出来了。

var formSlide = document.querySelectorAll('.form-slide button'),
    formCount;

document.querySelector('.delete').onclick = function () {
    document.querySelector('.delete').classList.add("active");
};

for (formCount = 0; formCount < formSlide.length; formCount++) {
    formSlide[formCount].onclick = function () {
        document.querySelector('.delete').classList.remove("active");
        alert(this.textContent);
    }
}

.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.active {
    -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.active + .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 ">Delete</button>
        <div class="form-slide">
            <div class="row">
                <div>
                    <button type="button" class="btn btn-xs btn-block btn-primary">Yes</button>
                </div>
                <div>
                    <button type="button" class="btn btn-xs btn-block btn-secondary">No</button>
                </div>
                <div>
                    <input type="text">Text</div>
            </div>
        </div>
    </div>
</div>

示例：

http://jsfiddle.net/link2twenty/pdjLk9z2/

Answer 3

如果您可以并且想要使用纯 CSS 解决方法“生活”，那就是。 （我在这个答案的末尾附上了一个小提琴示例）

首先，您在div 中创建自己的“警报”元素。像这样——

<div id="alert">
    <h3>Alert-Title</h3>
    <div class="content">
        This is the alert-content
    </div>
    <a href="#" id="close-alert">Close</a>
</div>

之后，您可以使用 CSS 中的 :target 伪类将“是”用作“按钮”并触发您的“警报”。

:target 定义：

:target 伪类表示唯一元素（如果有），其 id 与文档 URI 的片段标识符匹配。

来源： MDN - :target

之后，需要将<button>Yes</button>改为

<a href="#alert" class="btn btn-xs btn-block btn-primary">Yes</a>

最后添加以下 CSS -

div#alert{
    width: 350px;
    height: auto;
    min-height: 200px;
    background: #CCC;
    border-radius: 4px;
    padding: 10px 15px;
    display: none; /* hide the alert by default */
    margin: 0 auto;
    position: relative;
}
div#alert:target{
    display: block; /* this line changes the 'display: none' to 'display: block' */
}
div#alert h3{
    text-align: center;
}
div#alert > a#close-alert{
    position: absolute;
    right: 10px;
    bottom: 15px;
    background: #FFF;
    border: 1px solid #DDD;
    border-radius: 4px;
    padding: 15px;
    text-decoration: none;
}

Fiddle example