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