實現CSS轉換

我試圖製作一個簡單的登錄表單，當您單擊「登錄」時出現。 Scale-transition，Scale-out和Scale-in的Materialise類似乎不起作用。這裏是一個按鈕的例子（他們網站上的例子只使用了一個標籤按鈕，所以我試圖簡化它，以防它不能用於表單域）：實現CSS轉換

<a id="sign-in" class="btn waves-effect waves-teal scale-transition">SIGN IN</a> 
<a id="sign-up" class="btn waves-effect waves-teal scale-transition">SIGN UP</a> 
<input class="login btn waves-effect waves-light scale-transition scale-out" type="submit" value="LOG IN"/>

我有一個jQuery的功能，增加了和被點擊註冊按鈕時刪除類，我可以看到，當我在Chrome中檢查其是否工作。

$('#sign-in').click(function() { 
    $('#sign-in').addClass('scale-out'); 
    $('#sign-up').addClass('scale-out'); 
    $('.login').removeClass('scale-out').addClass('scale-in'); 
})

其他造型類Materialise的所有出現在這個問題上，我似乎找不到任何幫助，任何幫助都會得到很大的讚賞，另外，通過「不工作」，我的意思是說，所有的元素都在那裏，所有的時間，沒有重要的是應用哪些類。

來源

2017-02-25 melanie

它適合你嗎？

<a href="#!" id="sign-in" class="btn waves-effect waves-teal scale-transition">SIGN IN</a> 
<a href="#!" id="sign-up" class="btn waves-effect waves-teal scale-transition">SIGN UP</a> 
<input class="login btn waves-effect waves-light scale-transition scale-out" type="submit" value="LOG IN"/> 

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/css/materialize.min.css"> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/js/materialize.min.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
<script> 
$('#sign-in').click(function() { 
    $('#sign-in').addClass('scale-out'); 
    $('#sign-up').addClass('scale-out'); 
    $('.login').removeClass('scale-out').addClass('scale-in'); 
}) 
</script>

來源

2017-02-25 21:04:23

嗯，我可能確實也需要這樣做（感謝抓住！），但不幸的是，這對這個問題沒有任何影響。我甚至試着檢查他們的頁面，看看有沒有改變但沒有記錄，但沒有運氣。 – melanie

我已更新答案。似乎完全爲我工作，測試。如果它不適合你，我會再次測試。 –

omg，非常感謝！我更新了我們的腳本標籤，它完美地工作！這些是由我的團隊中的其他人設立的，我從來沒有看過他們。 – melanie

可以用更簡單的方法完成。

Form容器 - visibility：hidden的

的onClick - 能見度：可見

要應用過渡效果只需添加一個類到容器中。

來源

2017-02-25 21:37:25

回答

相關問題