Javascript CSS向上折叠项目&；向下动画

我有一个项目清单：

我想用动画效果将其折叠，只显示一个项目：

如您所见，当前它会折叠为一个项目，但整个组件不会折叠

我目前正在将项目不透明度设置为零：

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>

问题

这些项目仍然存在，它们只是透明的

所以，如果我点击它们，它们仍然会响应

而且，它们仍在占用空间，因此dom的其余部分仍在其下方

问题

如何允许项目从1个项目切换到5个项目，并具有动画效果，就像它们在上下滑动一样？而且，当它们上升时，它们也会释放它们下面的空间

我确实看过（请参阅“向下滑动和褪色”），但正如您在上面所看到的，这并没有实现我所需要的

谢谢

---

p、 我使用的是Ionic2，所以我不想使用任何其他Javascript框架，比如JQuery（只是普通的Javascript和css）。

嘿，我看还没有人回答你。查看我的代码笔，相关代码在下面突出显示。也很抱歉我不得不使用jQuery，我开始用javascript编写它，它太大了，jQuery不用手动循环两次就可以完成（我想我只是一个noob），希望这对您有所帮助

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');
    }
});

---

您需要在css中使用height属性进行转换

.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;
}

$（函数（）{
$（“li”）。单击（函数（）{
$（此）.addClass（“消失”）；
})
});
。消失{
身高：0；
过渡：1s全线性；
不透明度：0；
}
李{
高度：2米；
不透明度：1；
背景：绿色；
}


点击我崩溃
点击我崩溃
点击我崩溃

您应该具有高度：0；当你想隐藏它以显示收缩动画时。你能创建小提琴吗？如上所述，你需要将高度设置为0。设置不透明度会更改其透明度，但不会影响其在DOM中的尺寸或位置。嗨@Robert，谢谢。设置高度：0px会折叠背景，但没有动画。此外，它下面还有一个项目列表，也需要上移。不过还是有进步，谢谢。这类作品。不幸的是，不透明项仍然可以单击。此外，高度是即时设置的，没有动画“折叠”效果。事实上，你是对的，你必须将转换添加到元素，而不是隐藏类。如果高度为0，但您不能单击它们，除非您没有使用“框大小：边框框”，并且您有填充或其他内容。我不隐藏所有项目，只隐藏5个项目中的4个。我认为他们是被放在一起的。我是否应该将可视对象的z索引设置为最前端？从这里听起来像是javascript逻辑问题。顺便问一下，这些东西是怎么藏起来的？是你点击一个按钮，还是搜索框本身，其他的就消失了？它们是如何重新出现的？它们只是被上面的css隐藏，所以它们仍然存在，它们只是不透明的。要使它们向下折叠（显示），我单击第一项。汤姆让他们折叠（隐藏），我在下面滚动其他项目的列表。因此，它基本上是一个项目列表，当您单击第一个搜索项目时，其余项目将展开。完成后，你滚动，然后它们折叠起来。你看过Airbnb的应用程序吗？他们的搜索列表也有类似的功能。这就是我试图达到的效果，但我认为，因为我在Ionic2框架中，添加了标记，所以做起来并不简单。@Richard我很遗憾听到这个消息。框架应该授权而不是阻碍开发人员