jquery - 在哪里添加动画属性 - jQuery CSS？

Question

在此函数中的何处添加动画属性以添加和删除其他样式？

$('#close').click(function () {
    $('img').removeClass('additionalStyle');
    $(".theDiv").removeClass('visible').addClass('invisible');
});

https://jsfiddle.net/ChilledMonkeyBrain/a2txcLou/

Answer 1

这是一个解决方案，由于所有供应商前缀，CSS会有点长:

https://jsfiddle.net/leojavier/a2txcLou/6/

 <a href="#" class="trigger">
        <img src="http://www.fillmurray.com/100/100">    
    </a>    


    <a href="#" class="trigger">
        <img src="http://www.fillmurray.com/100/100">    
    </a>

JS

$('.trigger').click(function () {
        $('img').removeClass('fadein-translate');
        $(this).addClass('fadeout-translate');
});

CSS

.fadein-translate {
    -moz-animation: fadein-translate 3s ease-in-out;
    -o-animation: fadein-translate 3s ease-in-out;
    -webkit-animation: fadein-translate 3s ease-in-out;
    animation: fadein-translate 3s ease-in-out;
    -moz-animation-fill-mode: forwards;
    -o-animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

@keyframes fadein-translate {
    from {
        -moz-transform: translateY(50px);
        -ms-transform: translateY(50px);
        -o-transform: translateY(50px);
        -webkit-transform: translateY(50px);
        transform: translateY(50px);
        opacity: 0;
    }

    to {
        -moz-transform: translateY(0);
        -ms-transform: translateY(0);
        -o-transform: translateY(0);
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1;
    }
}

@-moz-keyframes fadein-translate {
    from {
        -moz-transform: translateY(50px);
        -ms-transform: translateY(50px);
        -o-transform: translateY(50px);
        -webkit-transform: translateY(50px);
        transform: translateY(50px);
        opacity: 0;
    }

    to {
        -moz-transform: translateY(0);
        -ms-transform: translateY(0);
        -o-transform: translateY(0);
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1;
    }
}

@-webkit-keyframes fadein-translate {
    from {
        -moz-transform: translateY(50px);
        -ms-transform: translateY(50px);
        -o-transform: translateY(50px);
        -webkit-transform: translateY(50px);
        transform: translateY(50px);
        opacity: 0;
    }

    to {
        -moz-transform: translateY(0);
        -ms-transform: translateY(0);
        -o-transform: translateY(0);
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1;
    }
}

.fadeout-translate {
    -moz-animation: fadeout-translate 1.5s ease-in-out;
    -o-animation: fadeout-translate 1.5s ease-in-out;
    -webkit-animation: fadeout-translate 1.5s ease-in-out;
    animation: fadeout-translate 1.5s ease-in-out;
    -moz-animation-fill-mode: forwards;
    -o-animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

@keyframes fadeout-translate {
    from {
        -moz-transform: translateY(0);
        -ms-transform: translateY(0);
        -o-transform: translateY(0);
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1;
    }

    to {
        -moz-transform: translateY(30px);
        -ms-transform: translateY(30px);
        -o-transform: translateY(30px);
        -webkit-transform: translateY(30px);
        transform: translateY(30px);
        opacity: 0;
    }
}

@-moz-keyframes fadeout-translate {
    from {
        -moz-transform: translateY(0);
        -ms-transform: translateY(0);
        -o-transform: translateY(0);
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1;
    }

    to {
        -moz-transform: translateY(30px);
        -ms-transform: translateY(30px);
        -o-transform: translateY(30px);
        -webkit-transform: translateY(30px);
        transform: translateY(30px);
        opacity: 0;
    }
}

@-webkit-keyframes fadeout-translate {
    from {
        -moz-transform: translateY(0);
        -ms-transform: translateY(0);
        -o-transform: translateY(0);
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1;
    }

    to {
        -moz-transform: translateY(30px);
        -ms-transform: translateY(30px);
        -o-transform: translateY(30px);
        -webkit-transform: translateY(30px);
        transform: translateY(30px);
        opacity: 0;
    }
}

https://jsfiddle.net/leojavier/a2txcLou/6/