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

Question

所以这是我创建的一个简单的小提琴（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){          }        });    }});});

Answer 1

该问题强调了几个问题：当转换在绝对和固定之间移动时的“跳转”以及伪元素的内容无法转换的事实。

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

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