我想知道是否有人可以帮助我制作动画。我的Divs倒塌了,由隐藏的复选框触发。我可以将复选框动画,但Divs本身并不动画。我尝试在多个类上设置过渡,但没有运气,我承认,我在CSS中并不强。有任何想法吗?预先感谢!
CSS:
body {
font-family: "Open Sans", "Sans-serif", Arial;
letter-spacing: 0.03em;
padding: 5px;
color: #435757;
}
div.main {
width: 1000px;
margin-left: auto;
margin-right: auto;
}
div.content {
border-left: 3px solid;
border-color: #0066cc;
padding-left: 15px;
width: 95%;
margin-left: auto;
margin-right: auto;
}
div.labeltab {
border-radius: 10px;
background-color: rgba(255, 255, 255, 0.2);
margin-top: 15px;
margin-bottom: 15px;
}
.toggle-box {
display: none;
}
.toggle-box + label {
padding: 10px;
cursor: pointer;
display: block;
clear: both;
font-size: 21px;
margin-right: auto;
margin-bottom: 5px;
text-align: left;
}
.toggle-box + label:hover {
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
}
.toggle-box + label + div {
display: none;
margin-left: 0px;
margin-right: auto;
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
.toggle-box:checked + label {
color: #0066cc;
font-style: italic;
}
.toggle-box:checked + label + div {
display: block;
margin-right: auto;
}
.toggle-box + label:before {
content: "";
display: block;
float: left;
font-size: 21px;
font-weight: 300;
border-right: 3px solid;
border-bottom: 3px solid;
width: 7px;
height: 7px;
transform: rotate(-45deg);
margin-top: 6px;
margin-right: 20px;
margin-left: auto;
text-align: left;
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
.toggle-box:checked + label:before {
content: "";
color: #0066cc;
border-right: 3px solid;
border-bottom: 3px solid;
width: 7px;
height: 7px;
transform: rotate(45deg);
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
html:
<div class="LabelTab"><input class="toggle-box" id="identifier-8" name="grouped" type="checkbox"><label for="identifier-8"> Test 1</label>
<div>
<div class="content">
<h4>Content 1</h4>
<p>Stuff</p>
</div>
</div>
</div>
<div class="LabelTab"><input class="toggle-box" id="identifier-6" name="grouped" type="checkbox"><label for="identifier-6">Test 2</label>
<div>
<div class="content">
<h4>Content 2</h4>
<p>Stuff</p>
</div>
</div>
</div>
您不能过渡display
,但是您可以过渡opacity
和max-height
body {
font-family: "Open Sans", "Sans-serif", Arial;
letter-spacing: 0.03em;
padding: 5px;
color: #435757;
}
div.main {
width: 1000px;
margin-left: auto;
margin-right: auto;
}
div.content {
border-left: 3px solid;
border-color: #0066cc;
padding-left: 15px;
width: 95%;
margin-left: auto;
margin-right: auto;
}
div.labeltab {
border-radius: 10px;
background-color: rgba(255, 255, 255, 0.2);
margin-top: 15px;
margin-bottom: 15px;
}
.toggle-box {
display: none;
}
.toggle-box + label {
padding: 10px;
cursor: pointer;
display: block;
clear: both;
font-size: 21px;
margin-right: auto;
margin-bottom: 5px;
text-align: left;
}
.toggle-box + label:hover {
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
}
.toggle-box + label + div {
opacity: 0;
max-height: 0;
overflow: hidden;
margin-left: 0px;
margin-right: auto;
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
.toggle-box:checked + label {
color: #0066cc;
font-style: italic;
}
.toggle-box:checked + label + div {
max-height: 100px;
opacity: 1;
margin-right: auto;
}
.toggle-box + label:before {
content: "";
display: block;
float: left;
font-size: 21px;
font-weight: 300;
border-right: 3px solid;
border-bottom: 3px solid;
width: 7px;
height: 7px;
transform: rotate(-45deg);
margin-top: 6px;
margin-right: 20px;
margin-left: auto;
text-align: left;
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
.toggle-box:checked + label:before {
content: "";
color: #0066cc;
border-right: 3px solid;
border-bottom: 3px solid;
width: 7px;
height: 7px;
transform: rotate(45deg);
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
<div class="LabelTab"><input class="toggle-box" id="identifier-8" name="grouped" type="checkbox"><label for="identifier-8"> Test 1</label>
<div>
<div class="content">
<h4>Content 1</h4>
<p>Stuff</p>
</div>
</div>
</div>
<div class="LabelTab"><input class="toggle-box" id="identifier-6" name="grouped" type="checkbox"><label for="identifier-6">Test 2</label>
<div>
<div class="content">
<h4>Content 2</h4>
<p>Stuff</p>
</div>
</div>
</div>
我得到了迈克尔!我在.toggle-box:necked label div中设置了一个最低点和最大高度,并在我的内容范围内设置了一个范围。现在,我有了多个高度,动画匹配的divs。谢谢!
body {
font-family: "Open Sans", "Sans-serif", Arial;
letter-spacing: 0.03em;
padding: 5px;
color: #435757;
}
div.main {
width: 1000px;
margin-left: auto;
margin-right: auto;
}
div.content {
border-left: 3px solid;
border-color: #0066cc;
padding-left: 15px;
width: 95%;
margin-left: auto;
margin-right: auto;
}
div.labeltab {
border-radius: 10px;
background-color: rgba(255, 255, 255, 0.2);
margin-top: 15px;
margin-bottom: 15px;
}
.toggle-box {
display: none;
}
.toggle-box + label {
padding: 10px;
cursor: pointer;
display: block;
clear: both;
font-size: 21px;
margin-right: auto;
margin-bottom: 5px;
text-align: left;
}
.toggle-box + label:hover {
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
}
.toggle-box + label + div {
opacity: 0;
max-height: 0;
overflow: hidden;
margin-left: 0px;
margin-right: auto;
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
.toggle-box:checked + label {
color: #0066cc;
font-style: italic;
}
.toggle-box:checked + label + div {
min-height: 100px;
max-height: 1200px;
opacity: 1;
margin-right: auto;
}
.toggle-box + label:before {
content: "";
display: block;
float: left;
font-size: 21px;
font-weight: 300;
border-right: 3px solid;
border-bottom: 3px solid;
width: 7px;
height: 7px;
transform: rotate(-45deg);
margin-top: 6px;
margin-right: 20px;
margin-left: auto;
text-align: left;
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
.toggle-box:checked + label:before {
content: "";
color: #0066cc;
border-right: 3px solid;
border-bottom: 3px solid;
width: 7px;
height: 7px;
transform: rotate(45deg);
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
<div class="LabelTab"><input class="toggle-box" id="identifier-8" name="grouped" type="checkbox"><label for="identifier-8"> Test 1</label>
<div>
<div class="content">
<h4>Content 1</h4>
<p>Stuff</p>
</div>
</div>
</div>
<div class="LabelTab"><input class="toggle-box" id="identifier-6" name="grouped" type="checkbox"><label for="identifier-6">Test 2</label>
<div>
<div class="content">
<h4>Content 2</h4>
<p>Stuff</p>
</div>
</div>
</div>