Question

我在滚动时使用Animate.css在元素上植入动画。我的元素有.fadeInRight类，hidden。当它们出现在滚动状态时，我会添加可见的参与

的类

{visibility:visible;}.

我在Safari上看到了淡入淡出的动画，但是在Chrome上，这个元素只是出现了，没有褪色，有什么想法吗？

{编辑} 是的这是元素html

<section class="Informations tadam fadeInLeft">
Some text
</section>

我的js

$(window).scroll(function() {
                $('.tadam').each(function(){
                var imagePos = $(this).offset().top;
                var topOfWindow = $(window).scrollTop();
                    if (imagePos < topOfWindow+(window.innerHeight * 0.9)) {
                        $(this).addClass("animated visible");
                    }
                });
            });

我的这两个课程的CSS

.tadam{visibility:hidden;}
.visible{visibility: visible;}

感谢您的帮助

Answer 1

这可能是因为你从＆＃34;隐藏＆＃34;到＆＃34;可见＆＃34;，此属性不可动画。

如果您的元素var createItem = (item) => { return <li key={item.id}> {item.text}<input type="checkbox" onChange={this.Checked} /> </li>; }; return <ul>{this.props.items.map(createItem)}</ul>;始终可见（或默认），并且您使用从visibility到opacity:0的转换，则该元素将有效。

所以你的CSS应该是这样的：

opacity:1

如果您绝对需要使用可见性，则应在可见类和动画类之间设置超时，如下所示：

.tadam{opacity: 0;}
.visible{opacity: 1;}

（比我想象的要好得多）

滚动bug chrome / firefox上的Animate.css

1 个答案: