セマンティック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

最初の問題は、jquery（see docs）が必要なので、jquery jsとsemantic-ui css/jsが含まれているということです。

第2の問題は、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を使用したアニメーション

答えて

関連する問題