那些遇到过的问题

CSS转换后单击

J.F*_*.F. 11 html css transform animated css-transforms

我的问题很简单,但我无法弄清楚它的来源.

我有一个按钮.当我点击它时,它会向左滑动,另一个按钮取代它,并带有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;
}
Run Code Online (Sandbox Code Playgroud) 
<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>
Run Code Online (Sandbox Code Playgroud)

你也可以像JFiddle一样看到它

当我点击一个新按钮时,我想打开一个JS警报.但是当我点击它时,没有任何附加内容,就像我没有点击这个按钮一样.

PS:我对CSS很新,如果你发现其他一些问题,请随时纠正我!

有人有想法吗？
谢谢你们 !

[编辑]谢谢你的所有答案!

到目前为止,我认为@alireza safian的解决方案在我的案例中是最好的.我更喜欢纯CSS,但看起来非常困难.就像我在评论中看到它一样,似乎焦点事件是问题的根源.如果单击"是",则在单击事件之前触发模糊事件."删除"按钮返回,但"是"不被视为已点击.

我想添加一件我忘了精确的事情:如果我点击按钮外,我需要再次出现"删除"按钮.这就是我使用焦点事件的原因.

为了获得这两个事件(模糊为"删除"并点击"是"),我修改了alireza safian的jsfiddle,我得到了这个结果:http://jsfiddle.net/86nhdrno/2/

它完成了这项工作,但我并不喜欢使用超时......

Ale*_*lex 1

OP问题：

通过纯css可以实现我想要的情况吗？

答：不，不是。

问题：

有哪些替代方法？

答：可以通过javascript、jQuery等来完成。

jQuery 解决方案：

杰斯小提琴

$('.delete').click(

  function() {
    $(this).addClass("active");
  });

$('.form-slide button').click(

  function() {
    $('.delete').removeClass("active");
    alert($(this).text());
  });
Run Code Online (Sandbox Code Playgroud) 
.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;
}
Run Code Online (Sandbox Code Playgroud) 
<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>
Run Code Online (Sandbox Code Playgroud)

JavaScript 解决方案：

杰斯小提琴

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");
}
Run Code Online (Sandbox Code Playgroud) 
.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;
}
Run Code Online (Sandbox Code Playgroud) 
<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>
Run Code Online (Sandbox Code Playgroud)

归档时间：

查看次数：

944 次

最近记录：

10 年，2 月 前
相关归档
更新网站的CSS而不刷新页面 81
使用CSS在段落中添加双引号 42
CSS:高度 - 填写div的其余部分？ 34
字体中的"a"代表什么:0/0 a; 27
Chrome条件评论 26
是否有不支持maxlength的浏览器？ 20
什么是CSS Authoring框架？ 20
生成CSS骨架的工具？ 19
Firefox中不显示背景图像 19
带有前值+1的FIll零 1
难疑归档
为什么HTML认为"chucknorris"是一种颜色？ 7264
如何从异步调用返回响应？ 5208
使用Git版本控制查看文件的更改历史记录 2920
如何在macOS或OS X上安装pip？ 1676
在Node.js中编写文件 1538
表命名困境:奇异与多个名称 1404
感叹号在功能之前做了什么？ 1190
如何在不使用存储库的情况下将Docker镜像从一个主机复制到另一个主机 1181
我可以将多个MySQL行连接到一个字段中吗？ 1143
我怎么知道分支是否已经合并为主分支？ 1077