CSS过渡和定位
[英]css transitions and positioning
问题描述
I've tried to get more familiar with transitions lately so I can use css to style my animations rather than scripts. 
最近，我试图更加熟悉过渡效果，因此可以使用CSS设置动画的样式，而不是脚本的样式。
My Objective is a modal window (fixed position) which comes up when a certain button is clicked. 我的目标是一个模式窗口（固定位置），单击某个按钮时会出现。 I would like to have a visual effect like the button spawns the modal, so the animation ought to originate from the position of the button. 我想要一种视觉效果，例如按钮产生了模态，所以动画应该起源于按钮的位置。
I'll insert some code at the end. 我将在末尾插入一些代码。
The question I have is whether there is a way without js to set the starting point of the animation (the position of the div while it is invisible) to the same location as the button. 我的问题是，是否有没有js的方法可以将动画的起点（不可见时div的位置）设置为与按钮相同的位置。 I assume it ought to be possible by simply having the div in the DOM right by that button. 我认为应该可以通过简单地使div在DOM中紧靠该按钮来实现。 However how do I use a transition to animate between a DOM-bound position to a fixed position? 但是，如何使用过渡在DOM绑定位置到固定位置之间设置动画？
If possible I would like to use Javascript only to switch classes. 如果可能的话，我只想使用Javascript来切换类。 But I would be ok with reading the position/offset of the button, too. 但是我也可以阅读按钮的位置/偏移量。 I however got stuck with my attempts so far. 但是到目前为止，我一直坚持自己的尝试。
Anyone able to steer me on track again? 有人能够再次引导我前进吗？ Thank you. 谢谢。
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
It's not possible to do this in pure CSS when using position: fixed . 使用position: fixed时，不可能在纯CSS中执行此操作。 If position: absolute is an option for you, then you can do this: 如果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
I think I figured out a work around. 我想我已经找到解决方法。 Not with as little javascript as I would have liked though. 虽然没有我想要的那样少的JavaScript。
I basically set the offset (thus css top and left) of the div on document load and then onScroll. 我基本上在文档加载时设置了div的偏移量（因此在CSS顶部和左侧），然后设置了onScroll。 I have no clue why it shouldn't work in the onClick right before the class switch. 我不知道为什么在类切换之前就不能在onClick中使用它。 Maybe some queueing issue? 也许一些排队问题？
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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.