为使用 JQuery 模板插入的新元素创建类似手风琴的动画

Question

如何为通过 JQuery 模板插入的新元素制作动画？我不想让它突然出现，而是让它几乎像手风琴一样出现，从 0 高度开始并扩展到全高。

我该怎么做？

JSFiddle 示例：https://jsfiddle.net/zvn1yju2/

代码片段：

$('.ui.button').on('click', function() {
  $('#testTemplate').tmpl().appendTo("#testDiv");
});

        .column:not(.row):not(.grid):after {
          background-color: rgba(86, 61, 124, .01);
          -webkit-box-shadow: 0px 0px 0px 1px rgba(86, 61, 124, 0.2) inset;
          box-shadow: 0px 0px 0px 1px rgba(86, 61, 124, 0.2) inset;
          content: "";
          display: block;
          min-height: 50px;
        }
        
        .greyDiv {
          height:150px;
          width: 150px;
          background: grey;
        }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.min.js"></script>

<div>
  <div class="ui grid container">
    <div class="four wide column">
      <button class="ui button">
        Insert Template
      </button>
      <div id="testDiv"></div>
    </div>   
  </div>
</div>

<script id="testTemplate" type="text/x-jquery-tmpl">
  <div class="ui input greyDiv">
  </div>
</script>

Answer 1

可以在模板上使用hide()并使用slideDown()或任何其他动画效果

$('.ui.button').on('click', function() {
   var $tmp =$('#testTemplate').tmpl().hide();
   $("#testDiv").append($tmp);
   $tmp.slideDown();
});

您也可以使用 css 动画来做到这一点

DEMO

为使用 JQuery 模板插入的新元素创建类似手风琴的动画

Creating an accordion-like animation for a new element inserted with a JQuery Template

html

javascript

css

jquery

semantic-ui