htmlcsstransformcss-transformsanimated

CSS Click after transform


My problem is very simple, but I can't figure out where it comes from.

I have a button. When I click on it, it slides to the left and another buttons take its place, with a CSS animation.
Here is my code :

.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>

you can see it too as JFiddle

When I click on a new button, I want to open a JS alert. But when I click on it, nothing appends, like I wasn't clicking on this button.

PS : I'm pretty new with CSS, if you find some other problems, feel free to correct me !

Anyone have an idea ?
Thank you all !

[EDIT] Thank you for all your answers !

So far, I think @alireza safian's solution is the best in my case. I'd prefer pure CSS, but it appears to be very difficult. Like I read it in the comments, it seems that it is the focus event that is the source of the problem. If I click "yes", the blur event triggers before the click event. The "delete" button comes back, but the "yes" is not considered clicked.

I'd like to add one thing I forgot to precise : I need the "delete" button to reappear if I click outside the buttons. That's why I used the focus event.

To get both events (blur for "delete" and click for "yes"), I modified alireza safian's jsfiddle, and I obtained this result : http://jsfiddle.net/86nhdrno/2/

It does the job, but I'm not very fan of using a timeout...


Solution

  • OP question:

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

    Answer: No, it is not.

    Question:

    What are the alternative ways for that?

    Answer: It can be done by javascript, jQuery and etc.

    jQuery solution:

    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 solution:

    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>