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，但它似乎很难。就像我在评论中读到的那样，问题的根源似乎是焦点事件。如果我点击 "yes"，模糊事件在点击事件之前触发。 "delete" 按钮返回，但 "yes" 未被视为已单击。

我想补充一件事我忘了说清楚：如果我在按钮外单击，我需要 "delete" 按钮重新出现。这就是我使用焦点事件的原因。

为了获得这两个事件（模糊 "delete" 和点击 "yes"），我修改了 alireza safian 的 jsfiddle，我得到了这个结果：http://jsfiddle.net/86nhdrno/2/

它完成了工作，但我不太喜欢使用超时...

Answer 1

如果可以并且想要 "live" 一个纯粹的CSS 解决方法，就在这里。（我在这个答案的末尾附上了一个 fiddle 示例）

首先，您在 div 中创建自己的 "alert" 元素。像这样 -

<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伪class把"Yes"当作"button"触发你的 "alert".

:target定义：

The :target pseudo-class represents the unique element, if any, with an id matching the fragment identifier of the URI of the document.

来源： 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

Answer 2

OP 问题：

Is it possible to achieve my desire situation by pure css?

回答：不，不是。

问题：

What are the alternative ways for that?

答：可以通过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 3

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

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/

CSS 变换后点击

CSS Click after transform

html

css

transform

animated

css-transforms