我最近尝试更熟悉转换，这样我就可以使用css来设计动画的样式，而不是脚本。
我的目标是一个模式窗口（固定位置），当点击某个按钮时会出现。我希望有一个视觉效果，就像按钮产生模态一样，所以动画应该从按钮的位置开始。
我将在末尾插入一些代码。
我的问题是，如果没有js，是否有办法将动画的起点（div不可见时的位置）设置为与按钮相同的位置。我认为只要将DOM中的div放在该按钮的右边就可以了。但是，如何使用转换在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>使用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>我想我找到了解决办法。虽然没有我想要的那么少的javascript。
我基本上在文档加载和滚动时设置div的偏移量（即css顶部和左侧）。我不知道为什么它不应该在类切换之前的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>