css轉換和定位

我試着最近更熟悉轉換，所以我可以使用CSS來設置我的動畫而不是腳本。css轉換和定位

我的目標是點擊某個按鈕時彈出的模式窗口（固定位置）。我希望有一個視覺效果，如按鈕生成模式，所以動畫應該來自按鈕的位置。

我會在最後插入一些代碼。

我的問題是，是否有一種沒有js的方式將動畫的起點（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>

來源

2015-12-04 user3154108

只需添加以下CSS內聯：'頂：-21px;左：0px'。 – jperezov

@ jperezov只有在按鈕保持在左上角時纔會有效。它有點像按鈕在屏幕上，包括不同的滾動狀態。 – user3154108

您可以在按鈕上使用getBoundingClientRect（）方法來獲取它的位置 - https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect。那麼你可以絕對定位你的模態窗口，既然你正在轉換到一個固定的位置，我認爲這應該是一切？ – lmenus

這是不可能使用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>

來源

2015-12-04 23:43:26 jperezov

謝謝，這是一個有趣的選擇。由於我的問題背後沒有實際需要，儘管我仍然有興趣以某種方式使其以固定位置工作。 – user3154108

我覺得我周圍想出了一個工作。沒有儘可能小的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>

來源

2015-12-05 01:09:51 user3154108

css轉換和定位

回答

相關問題