CSS中的简单铰链动画,删除类

时间:2015-07-06 16:56:04

标签: css animation

看看我的JSFiddle https://jsfiddle.net/hqvakp97/。我试图有一个铰链动画。当您关闭铰链时它会起作用,但是当您打开它时突然重新定位矩形。 HTML代码:

<div class="box"></div> 
<div class="rectangle"></div>  
<button class="transform-button" onclick="transform()">Transform</button>

JS代码:

var transform = function() {
    var rectangle = document.getElementsByClassName('rectangle')[0];
    (rectangle.classList.length === 1) ? rectangle.classList.add('active') : rectangle.classList.remove('active');
}

CSS代码:

.box {
    width: 200px;
    height: 200px;
    background-color: blue;
    z-index: 1;
}
.rectangle {
    position: relative;
    top: -100px;
    left: 200px;
    width: 200px;
    height: 50px;
    background-color: yellow;
    z-index: -1;
    transition: transform 1s ease-in;
}
.active {
    background-color: green;
    transform-origin: bottom left;
    transform: rotate(-90deg);
}
}

1 个答案:

答案 0 :(得分:2)

chrom start stop strand isoform mu_codon mut_codon2 len codon 1 len codon 2 more_info chr22 43089055 43089055 - NM_017436 C 1 7 903delC chr22 43089715 43089717 - NM_017436 CTT 3 13 241_243delTTC chr22 43089657 43089657 - NM_017436 G 1 7 301delG chr12 53701873 53701875 - NM_015665 TTC A 5 19 1292_1294delTTCinsA 添加到您的transform-origin: bottom left;样式中。 在删除.rectangle类时,Transition会在transform中顺利更改1s属性,但active会立即获取其默认值(因为它未在transform-origin中设置)。