卡在尝试复制某个 CSS 转换（向下滚动时移动到页面底角并得到修复的 CTA 按钮）

Question

所以这是我创建的一个简单的小提琴（http://jsfiddle.net/t1xywroc/2/）来向您展示我试图复制的动画。

我对 Javascript/Jquery 还很陌生，并且只接触 HTML 和 CSS 几个月。

关于我的动画的问题是（据我所知）没有从绝对位置到固定位置的转换，我相信这会在触发动画（或转换，如果你愿意的话）后立即导致小跳跃。第二个问题是，::before 元素的内容也无法转换。我如何使用 jQuery 修复这些问题？

我试图通过主要使用 CSS 来让它工作，但我不断遇到新问题。我想使用 JavaScript 是不可避免的，这就是我需要帮助的地方。我真的很感激。

注意：不是母语人士。

超文本标记语言

<div class="section">
  <div class="button">
  </div></div>

CSS

CSS

.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){

          }

        });

    }

});

});

Answer 1

该问题强调了几个问题：当转换在绝对和固定之间移动时的“跳转”以及伪元素的内容无法转换的事实。为了解决绝对到固定的跳转问题，我们可以在转换开始后立即将按钮设置为固定，然后进行转换。这可以通过引入 CSS 动画而不是过渡来实现。为了在内容之间进行转换，我们使用 before 伪元素来保存初始文本（如给定的代码中所示），并引入一个 after 伪元素来保存 svg。为了呈现两者之间的过渡效果，我们设置了不透明度的动画。注意：在要模拟的网站中，按钮最初在页面的白色背景上有一个白色背景。这意味着初始按钮消失时形状的变化不太明显。在对比鲜明的蓝色背景下，形状的变化更加明显。这可能是也可能不是所需的效果。这是一个带有动画而不是过渡的片段，并在动画开始时立即移动到固定位置。$(document).ready(function() {$(window).on('scroll', function() {&nbsp; &nbsp;if ($(window).width() <= 2500) {&nbsp; &nbsp; &nbsp; var scrollTop = $(this).scrollTop();&nbsp; &nbsp; &nbsp; $('.button').each(function() {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var topDistance = $(this).offset().top;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if ((topDistance - 30) < scrollTop) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $(this).addClass('floating');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; } else if ((topDistance - 100) >= scrollTop){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }});}});});.section {&nbsp; height: 2000px;&nbsp; width: auto;&nbsp; position: relative;}.button, .button::before, .button::after {&nbsp;&nbsp;&nbsp; animation-duration: 1.5s;&nbsp; animation-iteration-count: 1;&nbsp; animation-fill-mode: forwards;&nbsp; animation-timing-function: ease-in-out;&nbsp; position: absolute;}.button {&nbsp; transform: translateX(50%);&nbsp; right: 50%;&nbsp; line-height: 60px;&nbsp; height: 60px;&nbsp; width: auto;&nbsp; color: transparent; /* do this to ensure the button has dimensions so it can be clicked */&nbsp; display: inline-block;&nbsp; vertical-align: middle;&nbsp; top: 15rem;}.button.floating {&nbsp; position: fixed;&nbsp; top: 30px;&nbsp; animation-name: floatdown;}.button::before {&nbsp; content: 'Button\00a0 Text';&nbsp; opacity: 1;&nbsp; color: white;&nbsp; line-height: 60px;&nbsp; height: 60px;&nbsp; width: auto;&nbsp; padding-left: 25px;&nbsp; padding-right: 25px;&nbsp; background-color: blue;&nbsp; border-radius: 25px;}.button::after {&nbsp; &nbsp; 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>");&nbsp; &nbsp; opacity: 0;&nbsp; &nbsp; padding-left: 0px;&nbsp; &nbsp; padding-right: 0px;&nbsp; &nbsp; height: 80px;&nbsp; &nbsp; width: 80px;&nbsp; &nbsp; margin-left: -50%;&nbsp; &nbsp; background-color: red;&nbsp; &nbsp; border: none;&nbsp; &nbsp; border-radius: 50%;&nbsp; &nbsp; justify-content: center;&nbsp; &nbsp; text-align: center;}div.button.floating::before {&nbsp; &nbsp; animation-name: fadeout;}div.button.floating::after {&nbsp; &nbsp; animation-name: fadein;}@keyframes fadeout {&nbsp; &nbsp; 100% {&nbsp; &nbsp; &nbsp; opacity: 0;&nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; }}@keyframes fadein {&nbsp; &nbsp; 100% {&nbsp; &nbsp; &nbsp; opacity: 1;&nbsp; &nbsp; &nbsp; }}@keyframes floatdown {&nbsp; &nbsp; 100% {&nbsp; &nbsp; &nbsp; top: calc(100vh - 120px);&nbsp; &nbsp; &nbsp; right: 95px; /* 80+15px */&nbsp; &nbsp; }}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div class="section">&nbsp; <div class="button">Button text</div></div>另请注意，如果您希望向下箭头更多地填充圆圈，您可以将其作为尺寸包含的背景图像而不是内容。