CSS Нажмите после преобразования

Моя проблема очень проста, но я не могу понять, откуда она взялась.

У меня есть кнопка. Когда я нажимаю на него, он скользит влево, а другие кнопки заменяются на него с помощью анимации 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>

Ответы

Ответ 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>

Ответ 2

Если вы можете и хотите "жить" с помощью обходного метода CSS, вот оно. (Я приложил пример скрипта в конце этого ответа)

Сначала вы создаете свой собственный элемент "alert" внутри 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>

После этого вы можете использовать псевдо-класс :target внутри CSS, чтобы использовать "Да" как "button" и запускать свое "предупреждение".

:target определение:

Псевдокласс класса :target представляет уникальный элемент, если он есть, с идентификатором, соответствующим идентификатору фрагмента 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;
}

Пример скрипта

Ответ 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>