具有语义的动画 ui

Question

试图在单击按钮时制作动画，使用语义ui，一个框架。尝试了此 link => https://semantic-ui.com/modules/transition.html 中列出的第一个代码但它不起作用提前致谢！

<!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");
});

})();

Answer 1

第一个问题是semantic-ui requires 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>

具有语义的动画 ui

Animation with semantic ui

html

javascript

animation

web

semantic-ui