Question

我想逐个添加HTML元素的类。

TweenMax.staggerTo(".some-class-name", 0.5, { className: "+=animation-class" }, 0.5);

我有这段代码，但它没有用。更确切地说，它可以工作，但它不会逐个添加className。

如何使用此codepen实现效果，但className？

Answer 1

您有一个有效的查询，如果您只想为该元素添加新类。可以使用TweenMax或TweenLite.

来完成

TweenMax

TweenLite.to(element, 0.5, {css:{className:'+=newclass'}});

或

TweenMax.to(element, 0.5, {css:{className:'+=newclass'}});

或

TweenMax.staggerTo(element, 0.5, {css:{className:'+=newclass'}});

你可以制作一个forloop然后传递该类或做一个foreach并像这样添加这个类。

了解更多信息请点击此链接：

https://greensock.com/forums/topic/6376-using-greensock-to-change-classes-without-tweening-styles/

Answer 2

对我来说似乎很好。

看一下这个jsFiddle。

或者查看下面的 代码段 。

var duration = 0.5;
var stagger = 0.5;
var someClassName = '.some-class-name';
var animationClass = 'animation-class';
TweenMax.staggerTo(someClassName, duration, {className: '+=' + animationClass, transformOrigin: 'bottom right', ease: Power4.easeOut}, stagger);

html, body { margin: 0; padding: 0; }

.some-class-name {
    position: relative;
    float: left;
    width: 50px;
    height: 50px;
    background: #0cc;
}

.animation-class {
    background: #cc0;
    top: 50px;
    transform: rotate(90deg);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.17.0/TweenMax.min.js"></script>
<div class="some-class-name"></div>
<div class="some-class-name"></div>
<div class="some-class-name"></div>
<div class="some-class-name"></div>
<div class="some-class-name"></div>
<div class="some-class-name"></div>
<div class="some-class-name"></div>
<div class="some-class-name"></div>
<div class="some-class-name"></div>

var duration = 0.5;
var stagger = 0.5;
var someClassName = '.some-class-name';
var animationClass = 'animation-class';
TweenMax.staggerTo(someClassName, duration, {className: '+=' + animationClass, transformOrigin: 'bottom right', ease: Power4.easeOut}, stagger);

希望这有帮助。

greensock逐个将类添加到元素中

2 个答案: