CSS過渡和定位
[英]css transitions and positioning
問題描述
最近，我試圖更加熟悉過渡效果，因此可以使用CSS設置動畫的樣式，而不是腳本的樣式。
我的目標是一個模式窗口（固定位置），單擊某個按鈕時會出現。 我想要一種視覺效果，例如按鈕產生了模態，所以動畫應該起源於按鈕的位置。
我將在末尾插入一些代碼。
我的問題是，是否有沒有js的方法可以將動畫的起點（不可見時div的位置）設置為與按鈕相同的位置。 我認為應該可以通過簡單地使div在DOM中緊靠該按鈕來實現。 但是，如何使用過渡在DOM綁定位置到固定位置之間設置動畫？
如果可能的話，我只想使用Javascript來切換類。 但是我也可以閱讀按鈕的位置/偏移量。 但是到目前為止，我一直堅持自己的嘗試。
有人能夠再次引導我前進嗎？ 謝謝。
jQuery(document).ready(function() { jQuery('button').on('click', function() { if (jQuery('div').hasClass('orig')) { jQuery('div').offset(jQuery('button').offset()).removeClass('orig').addClass('alter'); } else jQuery('div').removeClass('alter').addClass('orig'); }); });
.orig { overflow: hidden; position: fixed !important; margin-left: 0px; margin-top: 0px; width: 0px; height: 0px; background-color: white; border: 0px solid black; border-radius: 3px; transition-property: all; transition-duration: 0.2s; } .alter { overflow: hidden; position: fixed !important; top: 50% !important; left: 50% !important; margin-left: -100px; margin-top: -50px; width: 200px; height: 100px; background-color: white; border: 1px solid black; border-radius: 3px; transition-property: all; transition-duration: 0.2s; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <body><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> <button>klick</button> <div class="orig">Lorem Ipsum ganz viel text</div> <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> </body>
2 個解決方案
解決方案1
1 2015-12-04 23:43:26
使用position: fixed時，不可能在純CSS中執行此操作。 如果position: absolute是您的選擇，則可以執行以下操作：
jQuery(document).ready(function() { jQuery('button').on('click', function() { var $modal = jQuery('.modal'); if ($modal.hasClass('orig')) { $modal.removeClass('orig').addClass('alter'); } else $modal.removeClass('alter').addClass('orig'); }); });
.modal { overflow: hidden; background-color: white; border: 1px solid black; border-radius: 3px; transition-property: all; transition-duration: 0.2s; } .modal.orig { position: absolute; top: 0; left: 0; border-width: 0; margin-left: 0px; margin-top: 0px; width: 0px; height: 0px; } .modal.alter { position: absolute; top: 50%; left: 50%; margin-left: -100px; margin-top: -50px; width: 200px; height: 100px; } .wrapper { position: relative; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <body> <pre> This is just here to push down the button a bit. </pre> <div class="wrapper"> <button>klick</button> <div class="orig modal">Lorem Ipsum ganz viel text</div> </div> </body>
解決方案2
0 2015-12-05 01:09:51
我想我已經找到解決方法。 雖然沒有我想要的那樣少的JavaScript。
我基本上在文檔加載時設置了div的偏移量（因此在CSS頂部和左側），然后設置了onScroll。 我不知道為什么在類切換之前就不能在onClick中使用它。 也許一些排隊問題？
jQuery(document).ready(function() { jQuery('div').offset(jQuery('button').offset()); jQuery(document).on('scroll', function() { jQuery('div').offset(jQuery('button').offset()); }); jQuery('button').on('click', function() { if (jQuery('div').hasClass('orig')) { jQuery('div').removeClass('orig').addClass('alter'); } else jQuery('div').removeClass('alter').addClass('orig'); }); });
body { margin: 0px; padding: 0px; position: relative; } .orig { overflow: hidden; position: fixed !important; margin-left: 0px; margin-top: 0px; width: 0px; height: 0px; border: 0px solid black; border-radius: 3px; transition-property: all; transition-duration: 0.2s; } .alter { overflow: hidden; position: fixed !important; top: 50% !important; left: 50% !important; margin-left: -100px; margin-top: -50px; width: 200px; height: 100px; border: 1px solid black; border-radius: 3px; transition-property: all; transition-duration: 0.2s; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <body> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <button>klick</button> <div class="orig">Lorem Ipsum ganz viel text</div> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> </body>
CSS定位，定位問題
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.