如何用jquery控制css转换的速度?

Elizabeth • 5 年前 • 1532 次点击

我有一个列表,滚动与css转换,但我想有相同的速度,无论列表有多长。如何使用jQuery控制速度?

这是css和指向笔的链接: https://codepen.io/disco_p/pen/BvWdqX?editors=1100

section {
    height: 90vh;
    background: #000;
}

  ul {
    margin: 0;
    padding: 0;
    list-style: none;
    color: #fff;
    font-size: em(18);
    text-align: center;
    font-weight: 500;
    column-count: 4;
    column-width: 200px;
    column-gap: 50px;
    animation: floatTextUp 3s infinite linear;
  }

  li {
    margin-bottom: 1.1em;
  }

  .scroll {
    height: 200px;
    overflow: hidden;
    position: relative;
  }

  @keyframes floatTextUp {
    to {
      transform: translateY(100%);
    }
  }

Python社区是高质量的Python/Django开发社区
本文地址：http://www.python88.com/topic/48524

1532 次点击

文章 [ 2 ] | 最新文章 5 年前

• 1 楼

Pilan 6 年前

你好,伊丽莎白,欢迎光临:)

你在3秒内100%(这是相对的)移动,所以你需要有一个固定的(绝对的)高度,所以要有一个恒定的速度。有最大的列表大小吗?如果是,可以将其用作默认高度并调整动画时间,直到您喜欢该速度为止。

必须使用某种类型的绝对高度,因此速度是根据要移动的像素确定的: min-height: 200px; 为了你的 .ul

这将一直有效,直到所有的空间都被利用。

codepen

• 2 楼

James 6 年前

可以根据列表的长度使用jquery设置动画持续时间。

function calcDuration(length) {
   /* For every ten items take 1s */
   return length / 10 + 's';
}

const listLength =  $('ul li').length;

$('ul').css('animation-duration', calcDuration(listLength));

登录后回复