css - 过渡到其他元素 CSS

Question

fiddle here

当单击一个正方形时，我需要使用相同的过渡使其他正方形消失(因此没有滚动条)。怎么做？

.block {
    width:100px;
    height:100px;
    -webkit-transition-duration: 2s;
    -webkit-transition-property: all;
    -webkit-transition-timing-function: ease-in-out; /*animation*/
    text-align: center;
    overflow: hidden;   
}

Answer 1

您可以以最快的方式添加到 body 或 parent 中，当您单击时方 block 的类名为“opened”，当您再次单击方 block 时删除此类。这里fiddle

$(".block").click(function(i, o){
    if ($(this).hasClass("open")) {
        $(this).removeClass("open");
        $('body').removeClass("opened");
    } else { 
        $(this).addClass("open");   
        $('body').addClass("opened");
    }
});