Question

我已经构建了一个应用程序，用于浏览Instagram API并获取照片。完成之后，我使用Handlebars制作一个带有无序列表和图像的模板。我一旦模板加载就试图让图像慢慢淡入，但无济于事。到目前为止它看起来像这样

在我的模板中，我添加隐藏的类，将不透明度设置为0，这样我就可以删除该类来显示图像。

<template id="image-template" type="text/x-handlebars-template">
    <ul>
        {{#each this}}          
            <li>
                <img class="hidden" src="{{url}}">
            </li>
        {{/each}}
    </ul>       
</template>

在JS中设置所有内容后

var template = Handlebars.compile( source.html() )
var html = template( images )
$('#container').html( html )

此时我应该在容器中有图像，所以我应该可以使用

$('img').removeClass('hidden')

并且图像会慢慢消失，但这并没有发生。经过一番调查后，我意识到那些图像对我来说都不太合适，所以我在将模板添加到html后设置了pub / sub

$('#container').html(html)
$.publish('insta/photoTransition')

我确信在此之后调用另一个函数会起作用，但仍然没有结果。在那之后，我只是出于想法，我在发布之前设置了Timeout，你知道什么，我的假设是真实的，并且延迟它最终起作用。但是我不想等一段时间来展示照片，我想尽快给他们看。在我试图弄清楚延迟是如何尝试我的最后一个想法之前，有没有更好的方法来解决我的问题？

Answer 1

只需使用css过渡。

#image-template img{
   opacity: 1;
   transition: opacity 0.4s ease-in;
   -moz-transition: opacity 0.4s ease-in;
   -webkit-transition: opacity 0.4s ease-in;
}

#image-template img.hidden{
   opacity: 0;
}

带把手的html过渡效果

1 个答案: