外側をクリックするとアイコンを回転させるようにしたい

このコードは、アイコンをクリックすると矢印の頭を上方向に回転させるために使用されます。アイコンの外側をクリックすると元に戻ります。アイコンをクリックしてアイコンの外側をクリックすると、このプロセスが繰り返されます。外側をクリックするとアイコンを回転させるようにしたい

<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>

関連する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); 
    } 
}

出典

2016-08-24 Dream Hunter

私はそれがあまりにもカムバックしたときに有効にスピンしたいこの

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>

出典

2016-08-24 04:01:30 z0mBi3

うん...良いもの –

を試してみてください。 –

コード位置をリセットしてアイコンの位置をリセットできるようにコードを更新しました。 – z0mBi3

外側をクリックするとアイコンを回転させるようにしたい

答えて

関連する問題