帶語義UI的動畫

試圖在點擊按鈕時使用語義UI來創建動畫框架。嘗試此鏈接中列出的第一個代碼=>https://semantic-ui.com/modules/transition.html 但它不起作用在此先感謝！帶語義UI的動畫

<!DOCTYPE html> 
<html> 
<head> 
    <title>Formulaire</title> 
    <link rel="stylesheet" type="text/css" href="css/form.css"> 
    <link rel="stylesheet" type="text/css" href="css/transition.css"> 
</head> 
<body> 
    <div id="pContainer"> 
     <div id="C1"> 
      <header id="title"> 
       <label id="titleDescription">Sign in</label> 
      </header> 
      <div id="C2"> 
       <form id="formulaire"> 
        <input class="textForm" name="username" type="text" placeholder="Username"></input> 
        <input class="textForm" name="password" type="password" placeholder="Password"></input> 
        <a href="#">Forgot password or username ?</a> 
        <div class="normalDiv"> 
         <input class="button" type="submit" value="Confirm"></input> 
         <input class="button" type="button" value="Cancel"></input> 
        </div> 
       </form> 
      </div> 
     </div> 
    </div> 
    <script type="text/javascript" src="js/transition.js"></script> 
    <script type="text/javascript" src="js/form.js"></script> 
</body>

(function(){ 
var bouttonConfirmer = document.querySelector(".button"); 
bouttonConfirmer.addEventListener("click",function(event){ 
    var objet = document.querySelector(".textForm"); 
    objet.transition('scale'); 
    alert("oki"); 
});

}）（）;

來源

2017-06-20 Mouley

你能後的文本，而不是截圖？ – styfle

當然是！ – Mouley

第一個問題是，semantic-ui需要jquery（see docs），所以我包含了jquery js和semantic-ui css/js。

第二個問題是button[type=submit]將提交表單並導致頁面加載。所以你將無法看到轉變。我改變了type=button以防止這種情況。

最後我讓您的<input />元素自動關閉。

$("#confirm").on("click", function() { 
 
    $('.textForm').transition('scale'); 
 
});

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <title>Example</title> 
 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.11.8/semantic.min.css"/> 
 
</head> 
 
<body> 
 
    <div id="pContainer"> 
 
     <div id="C1"> 
 
      <header id="title"> 
 
       <label id="titleDescription">Sign in</label> 
 
      </header> 
 
      <div id="C2"> 
 
       <form id="formulaire"> 
 
        <input class="textForm" name="username" type="text" placeholder="Username" /> 
 
        <input class="textForm" name="password" type="password" placeholder="Password" /> 
 
        <a href="#">Forgot password or username ?</a> 
 
        <div class="normalDiv"> 
 
         <input class="button" type="button" value="Confirm" id="confirm" /> 
 
         <input class="button" type="button" value="Cancel" /> 
 
        </div> 
 
       </form> 
 
      </div> 
 
     </div> 
 
    </div> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.11.8/semantic.min.js"></script> 
 
</body> 
 
</html>

來源

2017-06-21 14:03:18 styfle

不錯！它就像一個魅力，謝謝！請問一個問題，爲什麼你實現了semantic.min.css和semantic.min.js而不是transition.js？ – Mouley

我從來沒有使用過semantic-ui。我剛剛找到了託管腳本的CDN，所以我可以展示如何使用可運行代碼段修復它，而不是下載代碼。 – styfle

帶語義UI的動畫

回答

相關問題