Question

所以我试图制作一个简单的图库，当你点击它下方的小图片时图像会发生变化。

图1＆amp; 4和2＆amp; 5和3＆amp; 6绑定（如果单击图像2，则显示的图像为2＆amp; 5）

之前的图像淡出，新的图像淡入。为此，我使用了转换结束事件。

问题在于不透明度动画每当你点击它时淡出，但是当它显示它没有淡入时，但如果你点击相同的图像它按预期工作，我不能完全找出原因。

以下是代码：

<div class="gallery">
    <div class="img-area">
        <img data-bind="1" class="current" src="http://placehold.it/400x200">
        <img data-bind="1" class="current" src="http://placehold.it/500x250">
        <img data-bind="2" class="hidden" src="http://placehold.it/300x150">
        <img data-bind="2" class="hidden" src="http://placehold.it/250x125">
        <img data-bind="3" class="hidden" src="http://placehold.it/200x100">
        <img data-bind="3" class="hidden" src="http://placehold.it/350x175">
    </div>
    <ul class="img-selection">
        <li><img data-bind="1" src="http://placehold.it/400x200"></li>
        <li><img data-bind="2" src="http://placehold.it/300x150"></li>
        <li><img data-bind="3" src="http://placehold.it/200x100"></li>
        <li><img data-bind="1" src="http://placehold.it/500x250"></li>
        <li><img data-bind="2" src="http://placehold.it/250x125"></li>
        <li><img data-bind="3" src="http://placehold.it/350x175"></li>
    </ul>
</div>

<script>
var imgIndex = 1;
$(document).ready( function() {
    $(".hidden").hide();
    $(".hidden").css({ opacity:0 });
    $(".gallery .img-selection li img").click( function() {
        $(".gallery .img-area .current").css({ opacity:0 });
        imgIndex = $(this).data("bind");
        console.log(imgIndex);
        $(".gallery .img-area .current:eq(0)").one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend',   
        function() {
            console.log("transition end");
            $(".gallery .img-area .current").hide();
            $(".gallery .img-area .current").removeClass("current");
            $(".gallery .img-area img[data-bind=" +imgIndex+ "]").show();
            $(".gallery .img-area img[data-bind=" +imgIndex+ "]").css({ opacity:1 });
            $(".gallery .img-area img[data-bind=" +imgIndex+ "]").addClass("current");
        });
    });
});
</script>
<style>
.gallery {
    width: 50%;
    margin: auto;
}
.gallery > .img-area {
    width: 100%;
}
.gallery > .img-area > img {
    width: 49.7%;
    transition: opacity 1s linear;
    -moz-transition: opacity 1s linear;
    -webkit-transition: opacity 1s linear;
}
.gallery > .img-selection {
    width: 100%;
    padding: 0;
    margin: 0;
}
.gallery > .img-selection > li {
    display: inline;
    list-style: none;
}
.gallery > .img-selection > li > img {
    width: 16%;
}
</style>

http://jsfiddle.net/n6qW7/

Answer 1

经过一些研究后，你似乎无法在改变显示属性的同时进行转换。（隐藏节目）

CSS transitions don't work unless I use timeout

单击和转换结束时的不透明度转换更改为jquery（显示/隐藏））

1 个答案: