CSS折叠项目上下动画
CSS折叠项目上下动画
提问于 2017-03-31 19:51:46
我有一份物品清单：
其中，我想用动画效果崩溃，只显示一个项目：
如您所见，当前它折叠为一个项，但整个组件不会折叠。
我目前只是将项目的不透明度设置为零：
css
.slide-fade-hide {
transition: all 1.2s ease-out;
opacity: 0;
//height: 2em;
}
.slide-fade-show {
transition: all 1.2s ease-in;
opacity: 1;
//height: 2em;
}html
<ion-list>
<ion-row>
<ion-col>
<div id="search">
<ion-searchbar class="ion-searchtext" id="ion-searchtext" [(ngModel)]="searchQueryText" (ionFocus)="focusSearch($event)" (change)="onChangeText($event)"
(ionClear)="onCancelText($event)" (ionInput)="onInputText($event)" placeholder="{{jobType === 0 ? favourite ? 'Market Favourites' : 'Market' : favourite ? 'Postings Favourites' : 'Postings'}}"
debounce="1"></ion-searchbar>
</div>
<!--<div id="pinButton"><button ion-button (click)="presentPopover()" color="primary"><ion-icon name="funnel"></ion-icon></button></div>-->
</ion-col>
</ion-row>
<!--<div *ngIf="showExtraSearch === true">-->
<div id="extra-filter-items" class="slide-fade-hide">
<ion-row>
<ion-col>
<div id="location-filter">
<ion-searchbar id="ion-locationbar" [(ngModel)]="searchQueryLocation" (ionClear)="onCancelLocation($event)" (ionInput)="onInputLocation($event)"
(click)="presentFilterMap()" placeholder="Location" debounce="1"></ion-searchbar>
</div>
</ion-col>
</ion-row>
<ion-row>
<ion-col>
<div id="categories-filter">
<ion-searchbar id="ion-locationbar" [(ngModel)]="searchQuerySectors" (ionClear)="onCancelSectors($event)" (ionInput)="onInputSectors($event)"
(click)="presentFilterCategories()" placeholder="Sectors" debounce="1"></ion-searchbar>
</div>
</ion-col>
</ion-row>
<ion-row>
<ion-col>
<div id="rating-filter">
<ion-searchbar id="ion-locationbar" [(ngModel)]="searchQueryRating" (ionClear)="onCancelRating($event)" (ionInput)="onInputRating($event)"
(click)="presentFilterRating()" placeholder="Star Rating" debounce="1"></ion-searchbar>
</div>
</ion-col>
</ion-row>
<ion-row>
<ion-col>
<div id="time-filter">
<ion-searchbar id="ion-locationbar" [(ngModel)]="searchQueryTime" (ionClear)="onCancelTime($event)" (ionInput)="onInputTime($event)"
(click)="presentFilterTime()" placeholder="Last Online" debounce="1"></ion-searchbar>
</div>
</ion-col>
</ion-row>
</div>
</ion-list>javascript
showExtraFilters(): void {
let extraItemsElement = document.getElementById('extra-filter-items');
if (extraItemsElement) {
extraItemsElement.className = "slide-fade-show";
}
}
hideExtraFilters(): void {
let extraItemsElement = document.getElementById('extra-filter-items');
if (extraItemsElement) {
extraItemsElement.className = "slide-fade-hide";
}
}问题
这些物品仍然存在，只是透明而已。
- 所以，如果我点击他们，他们仍然会回应。
- 而且，他们仍然占据着空间，所以其余的领地仍然在它下面。
问题
如何允许这些项目从1项切换到5项，并具有动画效果，就像它们在上下滑动一样？而且，当他们站起来的时候，他们也会释放出他们下面的空间。
我确实看过这个例子 (见“幻灯片向下和淡出”)，但正如您在上面看到的，这并不能实现我所需要的。
谢谢
附注：我使用的是Ionic2，所以不想使用任何其他Javascript框架，比如JQuery (只是普通的javascript和css)。
回答 2
Stack Overflow用户
发布于 2017-03-31 20:09:03
您需要在css中使用高度属性进行转换。
$(function(){
$("li").click(function(){
$(this).addClass("vanish");
})
});.vanish {
height:0;
transition: 1s all linear;
opacity:0;
}
li {
height:2em;
opacity:1;
background:green;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<ul>
<li>Click me to collapse</li>
<li>Click me to collapse</li>
<li>Click me to collapse</li>
</ul>
</div>
Stack Overflow用户
发布于 2017-03-31 20:05:32
嘿，看来还没人回答你呢。查看我的代码，相关代码高亮如下。同样抱歉，我不得不使用jQuery，我开始用javascript编写它，它太大了，jQuery不需要手动遍历所有东西(我想我只是个菜鸟)，希望这对您有帮助。
CSS
.list-item {
display: block;
width: 200px;
height: 50px;
margin-bottom: 10px;
line-height: 50px;
text-align: center;
background-color: #fff;
transition: all 0.5s ease;
}
.list-item.hide {
height: 0;
margin: 0;
opacity: 0;
}jQuery
var listItem = $('.list-item');
listItem.click(function() {
if( listItem.hasClass('hide')) {
listItem.removeClass('hide');
} else {
listItem.not(this).addClass('hide');
}
});http://codepen.io/StefanBobrowski/pen/QpzYQj
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/43148647
复制相关文章
相似问题
腾讯云开发者
