时间戳

首页 > 解决方案 > 坚持尝试复制某个 CSS 转换（向下滚动时移动到页面底角并得到修复的 CTA 按钮）

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

问题描述

所以这是一个简单的小提琴（http://jsfiddle.net/t1xywroc/2/），我创建它是为了向您展示我试图复制的动画（来自这个网站：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){
          }
        });
    }
});
});

标签： javascripthtmljquerycsstransition

解决方案

问题中突出了几个问题：过渡在绝对和固定之间移动时的“跳跃”以及伪元素的内容无法过渡的事实。

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

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

推荐阅读