所以这是我创建的一个简单的小提琴（http://jsfiddle.net/t1xywroc/2/）来向您展示我试图复制的动画。我对 Javascript/Jquery 还很陌生，并且只接触 HTML 和 CSS 几个月。关于我的动画的问题是（据我所知）没有从绝对位置到固定位置的转换，我相信这会在触发动画（或转换，如果你愿意的话）后立即导致小跳跃。第二个问题是，::before 元素的内容也无法转换。我如何使用 jQuery 修复这些问题？我试图通过主要使用 CSS 来让它工作，但我不断遇到新问题。我想使用 JavaScript 是不可避免的，这就是我需要帮助的地方。我真的很感激。注意：不是母语人士。超文本标记语言<div class="section">
<div class="button">
</div></div>CSSCSS.section { height: 2000px; width: auto;}.button { position: absolute; transform: translateX(50%); right: 50%; display: inline-block; color: white; line-height: 60px; height: 60px; width: auto; padding-left: 25px; padding-right: 25px; background-color: blue; border-radius: 25px; vertical-align: middle; top: 15rem;}.button::before{ content: 'Button Text';}.floating { padding-left: 0px; padding-right: 0px; position: fixed; right: 15px; top: calc(100vh - 120px); transform: none; height: 80px; width: 80px; transition: all 1.5s ease-in-out; background-color: red !important; border: none; border-radius: 50%; justify-content: center; text-align: center;}.floating::before{ content:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24px' height='24px' fill='white'><path d='M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z' /></svg>");}JS$(document).ready(function() {$(window).on('scroll', function() { if ($(window).width() <= 768) { var scrollTop = $(this).scrollTop(); $('.button').each(function() { var topDistance = $(this).offset().top; if ((topDistance - 30) < scrollTop) { $(this).addClass('floating'); // Haven't put much thought into this part yet } else if ((topDistance - 30) >= scrollTop){ } }); }});});
1 回答
慕森王
TA贡献1777条经验 获得超3个赞
该问题强调了几个问题：当转换在绝对和固定之间移动时的“跳转”以及伪元素的内容无法转换的事实。
为了解决绝对到固定的跳转问题，我们可以在转换开始后立即将按钮设置为固定，然后进行转换。这可以通过引入 CSS 动画而不是过渡来实现。
为了在内容之间进行转换，我们使用 before 伪元素来保存初始文本（如给定的代码中所示），并引入一个 after 伪元素来保存 svg。为了呈现两者之间的过渡效果，我们设置了不透明度的动画。
注意：在要模拟的网站中，按钮最初在页面的白色背景上有一个白色背景。这意味着初始按钮消失时形状的变化不太明显。在对比鲜明的蓝色背景下，形状的变化更加明显。这可能是也可能不是所需的效果。
这是一个带有动画而不是过渡的片段，并在动画开始时立即移动到固定位置。
$(document).ready(function() {
$(window).on('scroll', function() {
if ($(window).width() <= 2500) {
var scrollTop = $(this).scrollTop();
$('.button').each(function() {
var topDistance = $(this).offset().top;
if ((topDistance - 30) < scrollTop) {
$(this).addClass('floating');
} else if ((topDistance - 100) >= scrollTop){
}
});
}
});
});
.section {
height: 2000px;
width: auto;
position: relative;
}
.button, .button::before, .button::after {
animation-duration: 1.5s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
animation-timing-function: ease-in-out;
position: absolute;
}
.button {
transform: translateX(50%);
right: 50%;
line-height: 60px;
height: 60px;
width: auto;
color: transparent; /* do this to ensure the button has dimensions so it can be clicked */
display: inline-block;
vertical-align: middle;
top: 15rem;
}
.button.floating {
position: fixed;
top: 30px;
animation-name: floatdown;
}
.button::before {
content: 'Button\00a0 Text';
opacity: 1;
color: white;
line-height: 60px;
height: 60px;
width: auto;
padding-left: 25px;
padding-right: 25px;
background-color: blue;
border-radius: 25px;
}
.button::after {
content: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24px' height='24px' fill='white'><path d='M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z' /></svg>");
opacity: 0;
padding-left: 0px;
padding-right: 0px;
height: 80px;
width: 80px;
margin-left: -50%;
background-color: red;
border: none;
border-radius: 50%;
justify-content: center;
text-align: center;
}
div.button.floating::before {
animation-name: fadeout;
}
div.button.floating::after {
animation-name: fadein;
}
@keyframes fadeout {
100% {
opacity: 0;
}
}
@keyframes fadein {
100% {
opacity: 1;
}
}
@keyframes floatdown {
100% {
top: calc(100vh - 120px);
right: 95px; /* 80+15px */
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="section">
<div class="button">Button text</div>
</div>
另请注意，如果您希望向下箭头更多地填充圆圈，您可以将其作为尺寸包含的背景图像而不是内容。
添加回答
举报
0/150
提交
取消