坚持尝试复制某个 CSS-Transition（CTA-Button 在向下滚动时移动到页面的底角并得到修复）

Question

所以这是一个简单的 fiddle (http://jsfiddle.net/t1xywroc/2/) I created to show you the animation I'm trying to replicate (from this website: https://paperpillar.com/).

我对 Javascript/Jquery 还是很陌生，只做了 HTML 和 CSS 几个月。

关于我的动画的问题是（据我所知）没有从绝对位置到固定位置的过渡，我认为这会导致在触发动画（或过渡，如果你愿意） ).第二个问题是，::before 元素的内容也无法转换。我如何使用 jQuery 解决这些问题？

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

注意：不是母语人士。

HTML

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

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

问题中突出显示了几个问题：'jump' 在 absolute 和 fixed 之间移动时的过渡以及伪元素的内容无法过渡的事实。

为了解决绝对到固定的跳转问题，我们可以在转换开始后立即将按钮设置为固定，然后再进行转换。这可以通过引入 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[=11=]a0 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>

另请注意，如果您希望向下箭头更多地填充圆圈，您可以将其作为包含大小的背景图像而不是作为内容。

坚持尝试复制某个 CSS-Transition（CTA-Button 在向下滚动时移动到页面的底角并得到修复）

Stuck on trying to replicate a certain CSS-Transition (CTA-Button that moves to the bottom corner of the page when scrolling down and gets fixed)

html

javascript

css

jquery

transition