有没有办法为 display:none 设置动画？

Question

我正在根据下拉菜单中的选择过滤 div，这使所有具有所选值的 div 可见，然后其他所有内容都获得 css 属性 display:none;有没有办法对此进行动画处理，所以它不是那么苛刻的过渡？

jQuery

$(function(){
    $("#map-date, #map-type, #map-county").change(function (){
        var filters = $(this).val();
        $("div.map-thumb").css({"display":"none"});
        $("div[class*='" + filters + "']").show();
    });
});

HAML

.row#map-thumbnail-wrapper
  .medium-4.columns
    %select#map-type
      %option.filter{value: "all"} Type of Program
      - MapChoices['program'].each do |program|
        %option.filter{value: program.downcase.gsub(' ', '-')}= link_to program, '#'
  .medium-4.columns
    %select#map-date
      %option.filter{value: "all"} Date Constructed
      - [*2007..Date.today.year].each do |year|
        %option.filter{value: year}= year
  .medium-4.columns
    %select#map-county
      %option.filter{value: "all"} County
      - current_locations = @cms_page.children.published.map { |i| cms_page_content(:county, i).capitalize }.keep_if(&:present?).uniq.sort
      - current_locations.each do |county|
        %option.filter{value: county.downcase.gsub(' ', '-')}= link_to county, '#'
.well-thumbnails
  - @cms_page.children.published.in_groups_of(6, false) do |location_row|
    .row
      - location_row.each do |location|
        .medium-2.columns
          - date_created = cms_page_content(:date_created, location)
          .map-thumb.all{class: "#{cms_page_content(:program, location).downcase.gsub(' ', '-')} #{DateTime.parse(date_created).strftime('%Y') if date_created.present?} #{cms_page_content(:county, location).downcase}"}
            - preview_image = cms_page_content('preview.image', location)
            = link_to image_tag(preview_image.file.url(:original)), location.full_path if preview_image
            .map-yellow
            .map-align-mid
              .thumb-text-wrapper
                = cms_page_content(:name, location)

Answer 1

执行此操作的标准方法是淡出（也称为不透明度 = 0），然后在动画完成后使用无显示。然后，一旦您希望它返回，使其成为可见的显示类型，然后淡入（不透明度 = 1）。

Answer 2

这就是最终的工作

jQuery

$(function(){
    $("#map-date, #map-type, #map-county").change(function (){

      var filters = $(this).val();
      $("div.map-thumb").animate({opacity: 0});

      setTimeout(function() {
        $("div.map-thumb").css({"display":"none"});
        $("div[class*='" + filters + "']").show().animate({opacity: 1});
      }, 500); 
    });
});