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...
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:
$('.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:
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>