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动画执行此操作

的 tf.sparse_tensor_to_dense()

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

1 个答案: