更改 css 形状 onclick

Question

我有两种形状，一种是直线，一种是十字。当我点击 LINE 时，它变成了 CROSS。我只想在单击时获得流体形状变换。

线

#linea {
background: black;
height: 30px;
position: relative;
width: 2px;
}

交叉

#cross {
background: black;
height: 30px;
position: relative;
width: 2px;
-webkit-transform: rotate(45deg);
}

#cross:after {
background: black;
content: "";
height: 2px;
left: -14px;
position: absolute;
top: 14px;
width:30px;
}

这是 JSFIDDLE — https://jsfiddle.net/nk2w9w3z/3/

感谢您的帮助。 F.

Answer 1

您应该在声明中添加 transition。

CSS Transitions allows property changes in CSS values to occur smoothly over a specified duration.

例如；

div {
  height: 30px;
  width: 30px;
  background: lightgray;
  position: relative;
}
div:before,
div:after {
  content: "";
  position: absolute;
  height: 100%;
  width: 0;
  border-left: 2px solid black;
  left: 50%;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  transition: all 0.8s;
}
div:hover:before {
  -webkit-transform: translateX(-50%) rotate(45deg);
  -moz-transform: translateX(-50%) rotate(45deg);
  -ms-transform: translateX(-50%) rotate(45deg);
  transform: translateX(-50%) rotate(45deg);
}
div:hover:after {
  -webkit-transform: translateX(-50%) rotate(-45deg);
  -moz-transform: translateX(-50%) rotate(-45deg);
  -ms-transform: translateX(-50%) rotate(-45deg);
  transform: translateX(-50%) rotate(-45deg);
}

<div></div>hover this gray box

要添加此样式而不是 'hover'（即使其 可点击），您可以改用 class 样式，并使用 javascript/jquery:

$(document).ready(function() {
  $('div').click(function() {
    $('div').toggleClass("opened");
  });
});

div {
  height: 30px;
  width: 30px;
  background: lightgray;
  position: relative;
  cursor: pointer;
}
div:before,
div:after {
  content: "";
  position: absolute;
  height: 100%;
  width: 0;
  border-left: 2px solid black;
  left: 50%;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  transition: all 0.8s;
}
.opened:before {
  -webkit-transform: translateX(-50%) rotate(45deg);
  -moz-transform: translateX(-50%) rotate(45deg);
  -ms-transform: translateX(-50%) rotate(45deg);
  transform: translateX(-50%) rotate(45deg);
}
.opened:after {
  -webkit-transform: translateX(-50%) rotate(-45deg);
  -moz-transform: translateX(-50%) rotate(-45deg);
  -ms-transform: translateX(-50%) rotate(-45deg);
  transform: translateX(-50%) rotate(-45deg);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div></div>

click this gray box

备注

为转换属性添加前缀将是 required for cross browser compatibility. The Transition property 根本不需要添加前缀。

Answer 2

使用CSS 转换。您在这里有一个指南：http://www.w3schools.com/css/css3_transitions.asp

您的 CSS

中需要类似 transition: all 1s; 的内容

Answer 3

这样做：

function changeShape(){
  var ele = document.getElementById("shape");
  (ele.className === "linea") ? ele.className = "cross" : ele.className = "linea";
}

div{
  -webkit-transition: all 1s ease; /* Firefox */
  -moz-transition: all 1s ease; /* WebKit */
  -o-transition: all 1s ease; /* Opera */
  transition: all 1s ease; /* Standard */
  margin-left: auto;
  margin-right: auto;
}
.linea {
background: black;
height: 30px;
position: relative;
width: 2px;}

.cross {
  background: black;
  height: 30px;
  position: relative;
  width: 2px;
  -ms-transform: rotate(45deg); /* IE 9 */
  -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
  transform: rotate(45deg);
}
.cross:after {
  background: black;
  content: "";
  height: 2px;
  left: -14px;
  position: absolute;
  top: 14px;
  width:30px;
}

<div id="shape" class="linea"></div>
<button onclick="changeShape()">Change the shape</button>

解释：

我们在 html 部分做的事情很简单。我创建了一个 "div"，它最初是一个 "line"（注意 class）。之后我们有一个按钮，它只是一个虚拟按钮来显示代码是如何工作的。

好的，在 "onclick" 我们执行 changeShape() 函数。此函数只是将 class 从 "cross" 更改为 "linea"，反之亦然。

最有趣的部分是 CSS。我已经使用了你的两个 classes（直线和十字）并将 "transitions" 添加到 div 本身。转换确保您将此 "smooth" 转换为不同的形状。 http://www.w3schools.com/css/css3_transitions.asp

更改 css 形状 onclick

Change css shape onclick

javascript

css-shapes