看看我的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);
}
}
答案 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
中设置)。