如何动画＆＃34;：之后＆​​＃34;使用CSS或jQuery

Question

我有一个像这样的菜单：Fiddle。

＆＃13;

＆＃13;

$(".squ").click(function() {
  $('.pen').addClass('squ');
  $('.pen').removeClass('pen');
  $(this).removeClass("squ");
  $(this).addClass("pen");
});

＆＃13;

.squ {
  background-color: #0266B4;
  width: 188px;
  height: 21px;
  position: relative;
  text-transform: uppercase;
  display: table;
  margin: 7px 0 0 0;
  color: white;
  font-size: 14px;
  transition: all 0.6s ease-in-out;
  -o-transition: all 0.6s ease-in-out;
  -moz-transition: all 0.6s ease-in-out;
  -webkit-transition: all 0.6s ease-in-out;
}
.squ:hover {
  background-color: #419EE6;
}
.squ p {
  margin: 0;
  display: table-cell;
  vertical-align: middle;
  padding-left: 30px;
}
.sec1 .squ {
  cursor: pointer;
}
.pen {
  background-color: #419EE6;
  width: 188px;
  height: 21px;
  position: relative;
  text-transform: uppercase;
  display: table;
  margin: 7px 0 0 0;
  color: white;
  font-size: 14px;
}
.pen p {
  margin: 0;
  display: table-cell;
  vertical-align: middle;
  padding-left: 30px;
  transition: all 0.6s ease-in-out;
  -o-transition: all 0.6s ease-in-out;
  -moz-transition: all 0.6s ease-in-out;
  -webkit-transition: all 0.6s ease-in-out;
  cursor: default;
}
.pen:after {
  content: '';
  width: 0px;
  height: 0px;
  border-top: 10px solid transparent;
  border-bottom: 11px solid transparent;
  border-left: 22px solid #419EE6;
  position: absolute;
  transition: all 0.6s ease-in-out;
  -o-transition: all 0.6s ease-in-out;
  -moz-transition: all 0.6s ease-in-out;
  -webkit-transition: all 0.6s ease-in-out;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="pen">
  <p id="e-w" onclick="checkDisableCbs(this.id);">banana</p>
</div>

<div class="squ">
  <p id="qin" onclick="checkDisableCbs(this.id);">apple</p>
</div>

＆＃13;

＆＃13;

＆＃13;

当点击其中一个列表项时，我在两个类之间切换。 选定的一个类（.pen）具有看起来像箭头的:after（CSS）。

我如何设置动画，就好像它已经离开div（从左到右）

Answer 1

您需要已经定义了它。然后使用position制作动画。 display和类似的内容无法动画显示（请参阅CSS Animatable Properties）。此外，您尝试执行的操作类似于将display: none中的内容添加到display: block。

所以我在这里做的是：

1. 使用.pen p::after和p::after将z-index: -1更改为right: 15px，其值大于宽度。
2. 将right属性设置为right: 15px;或其正确匹配的位置。
3. 更正了top: 0;属性。
4. 要使始终，请将事件委派给可能的静态父级。您正在分配class，该更改因点击而发生变化。所以不是静态的。

工作代码段

＆＃13;
＆＃13;
$(document).on("click", ".squ", function () {
  $('.pen').addClass('squ');
  $('.pen').removeClass('pen');
  $(this).removeClass("squ");
  $(this).addClass("pen");
});
＆＃13;
.squ {
  background-color: #0266B4;
  width: 188px;
  height: 21px;
  position: relative;
  text-transform: uppercase;
  display: table;
  margin: 7px 0 0 0;
  color: white;
  font-size: 14px;
  transition: all 0.6s ease-in-out;
  -o-transition: all 0.6s ease-in-out;
  -moz-transition: all 0.6s ease-in-out;
  -webkit-transition: all 0.6s ease-in-out;
}

.squ:hover {
  background-color: #419EE6;
}

.squ p {
  margin: 0;
  display: table-cell;
  vertical-align: middle;
  padding-left: 30px;
}

.sec1 .squ {
  cursor: pointer;
}

.pen {
  background-color: #419EE6;
  width: 188px;
  height: 21px;
  position: relative;
  text-transform: uppercase;
  display: table;
  margin: 7px 0 0 0;
  color: white;
  font-size: 14px;
}

.pen p {
  margin: 0;
  display: table-cell;
  vertical-align: middle;
  padding-left: 30px;
  transition: all 0.6s ease-in-out;
  -o-transition: all 0.6s ease-in-out;
  -moz-transition: all 0.6s ease-in-out;
  -webkit-transition: all 0.6s ease-in-out;
  cursor: default;
}

p::after {
  content: '';
  width: 0px;
  height: 0px;
  border-top: 10px solid transparent;
  border-bottom: 11px solid transparent;
  border-left: 22px solid #419EE6;
  position: absolute;
  transition: all 0.6s ease-in-out;
  -o-transition: all 0.6s ease-in-out;
  -moz-transition: all 0.6s ease-in-out;
  -webkit-transition: all 0.6s ease-in-out;
  right: 15px;
  z-index: -1;
  top: 0;
}

.pen p::after {
  right: -20px;
}
＆＃13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="pen">
  <p id="e-w" onclick="checkDisableCbs(this.id);">banana</p>
</div>
<div class="squ">
  <p id="qin" onclick="checkDisableCbs(this.id);">apple</p>
</div>
＆＃13;
＆＃13;
＆＃13;