CSS Click after transform

Question

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

You cannot do that by pure css. You have to use javascript or jquery. — Alex, Nov 23 '15 at 15:20
@alirezasafian Please look at the code, the OP IS using javascript — StudioTime, Nov 23 '15 at 15:30
@DarrenSweeney I mean he can not get his desire situation by pure css — Alex, Nov 23 '15 at 15:40
I think it is to do with the delete button losing it's focus before yes can be clicked — Andrew Bone, Nov 23 '15 at 15:59

score 1 · Accepted Answer · edited Feb 18 '16 at 21:42

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>

It's true that I prefer pure CSS, but it seems that your solution (using JS) will be the solution of my problem... (see [EDIT] in my post). So thanks alireza safian ! — J.F., Nov 23 '15 at 16:40
I think generally people should get to grips with JS before they start using JQuery — Andrew Bone, Nov 23 '15 at 16:45
@AndrewBone You are right but jquery is clean and easier that javascript. — Alex, Nov 24 '15 at 14:17

Ramiz Wachtler · Answer 2 · 2015-11-23T16:02:54.277

If you can and want "live" with a pure CSS workaround, here it is. (I've attached a fiddle example at the end of this answer)

First, you create your own "alert" element inside a div. Like this -

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

After that, you can take use of the :target pseudo-class inside the CSS to use the "Yes" as a "button" and trigger your "alert".

:target definition:

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

Source: MDN - :target

After that, you need to change <button>Yes</button> to

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

Finally add following 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

Hmm, it just slides back for me, the url doesn't change and there are no alerts. — Andrew Bone, Nov 23 '15 at 16:38
@AndrewBone strange, I've also checked on [caniuse.com](http://caniuse.com/#search=%3Atarget) , seems not like a browser issue.. — Ramiz Wachtler, Nov 23 '15 at 16:54

score 0 · Answer 3 · answered Nov 23 '15 at 16:18

OK, so my understanding is because you are using focus the focus is being lost before it registers the click. So here is a solution, I took @alireza safian's answer and took the JQuery out.

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>

Example:

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

CSS Click after transform

3 Answers3