Semantic UI中shape使用

<div class="example">
      <h4 class="ui header">Shape Types</h4><i class="icon code"></i><a class="anchor" id="shape-types"></a>
      <p>Shapes do not have to be regular or have its sides match up in length and width to animate correctly.</p>

      <h3 class="ui header">形状</h3>
      <div class="ui type buttons">
        <div class="active ui button" data-shape="auto">Auto</div>
        <div class="ui button" data-shape="square">方形</div>
        <div class="ui button" data-shape="irregular">不规则</div>
      </div>
      <div class="ui divider"></div>
      <div class="demo auto ui shape">
        <div class="sides">
          <div class="active first side">
            <img src="/images/leaves/1.png" class="ui medium image">
          </div>
          <div class="second side">
            <img src="/images/leaves/3.png" class="ui medium image">
          </div>
          <div class="third side">
            <img src="/images/leaves/5.png" class="ui medium image">
          </div>
        </div>
      </div>

      <div class="ui ignored divider"></div>
      <div class="ui ignored icon direction buttons">
        <div class="ui button" data-animation="flip" title="Flip Left" data-direction="left"><i class="left long arrow icon"></i></div>
        <div class="ui button" data-animation="flip" title="Flip Up" data-direction="up"><i class="up long arrow icon"></i></div>
        <div class="ui icon button" data-animation="flip" title="Flip Down" data-direction="down"><i class="down long arrow icon"></i></div>
        <div class="ui icon button" data-animation="flip" title="Flip Right" data-direction="right"><i class="right long arrow icon"></i></div>
      </div>
      <div class="ui ignored icon direction buttons">
        <div class="ui button" title="Flip Over" data-animation="flip" data-direction="over"><i class="retweet icon"></i></div>
        <div class="ui button" title="Flip Back" data-animation="flip" data-direction="back"><i class="flipped retweet icon"></i></div>
      </div>
    </div>

$(document).ready(function(){
   
 var
        $demo = $('.demo'),
        $directionButton = $('.direction .button'),
        $shapeButton = $('.type.buttons .button'),
        handler
        ;

    // 事件处理函数
    handler = {
        rotate: function () {
   
            var
                $shape = $(this).closest('.example').find('.ui.shape'),
                direction = $(this).data('direction') || false,
                animation = $(this).data('animation') || false
                ;
            if (direction && animation) {
                $shape.shape(animation + '.' + direction);
            }
        },
        //移除shape
        removeShape: function () {
   
            var
                shape = $(this).data('shape') || false;
            if (shape) {
                $demo.removeClass(shape);
            }
        },
      //更改当前的形状
        changeShape: function () {
   
            var
                $shape = $(this),
                $otherShapes = $shape.siblings(),
                shape = $shape.data('shape');
            $shape.addClass('active');
            $otherShapes.removeClass('active').each(handler.removeShape);
            $demo.removeAttr('style').addClass(shape);
        }
    };

    // 绑定事件处理函数
    $demo.shape();
    $directionButton.on('click', handler.rotate).popup({
        delay: 0,
        position: 'bottom center'
    });
    $shapeButton.on('click', handler.changeShape);

});

api文档如下：

内容转自官网，如有版权问题其联系作者