dream hunter dream hunter - 3 months ago 8
CSS Question

I want to make the icon spin back when click on outside

This code is used to spin the arrow head upward direction on click on that icon .I want to spin it back when click on out side of icon and i also i want to repeat this processes when click on icon and click outside of the icon.

<html>
<head>
<link rel="stylesheet" type="text/css" href="troll.css">
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="../project/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="../project/style.css" />
<link rel="stylesheet" type="text/css" href="../project/font-awesome-4.2.0/css/font-awesome.min.css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script>
function rotate(){
document.getElementById("me").className="spinner fa fa-caret-down";
}
</script>
</head>
<body>
<i onclick="rotate()" id="me" class=" fa fa-caret-down "></i>
</body>
</html>


associated css:

.spinner {
-webkit-animation:spin 0.5s linear 1;
-moz-animation:spin 0.5s linear 1;
animation:spin 0.5s linear 1;
animation-fill-mode: forwards;
}
@keyframes spin {
0% {
transform: rotate(0);
}
100% {
transform: rotate(180deg);
}
}
-webkit-keyframes spin {
0% {
transform: rotate(0);
}
100% {
transform: rotate(180deg);
}
}

Answer

Try this

function rotate(e){
  document.getElementById("me").className="spinner in fa fa-caret-down";
  e.stopPropagation();
}

function resetRotation(){
  document.getElementById("me").className="spinner out fa fa-caret-down";
}

document.addEventListener('click', resetRotation);
.spinner {
  transition: all 0.5s linear;
}

.spinner.in{
  transform: rotate(180deg);
}
.spinner.out{
  transform: rotate(0deg);
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<i onclick="rotate(event)" id="me" class="spinner fa fa-caret-down "></i>

Comments