Question

我想在按下ui hugh主按钮后做出翻转效果，以便在按下按钮后文本将翻转。不幸的是，这似乎行不通。我已经尝试过ui形状，结果是一样的-没有任何反应。有人可以告诉我怎么了吗？非常感谢你！

<div class="logo">
<link rel="stylesheet" href="/../../../node_modules/semantic-ui-css/semantic.min.css">
<script src="/../../../node_modules/semantic-ui/dist/semantic.min.js"></script>

    <div class="ui black inverted segment">
      <div class="ui inverted header">
  <h2>Some text
      </h2>
<div class="ui hugh primary button" id="flip">Start!</div>
</div>
  <script>
    $('#flip').click(function() {
      $('.ui.inverted.header').header('flip over');
    });
  </script>
</div>

Answer 1

从Semantic-ui文档中，我发现没有flip over过渡！

元素可以flip垂直或水平进入或离开视图

经过一些修改，我就能使用您的代码进行horizontal flip。

$(document).ready(function(){
          $('#flip').click(function() {
      $('.ui.black.inverted.segment').transition('horizontal flip');
    });
     });

<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"></script>


    <div class="ui black inverted segment">
      <div class="ui inverted header">
  <h2>Some text
      </h2>
      

</div>

</div>
<div class="ui hugh primary button" id="flip">Start!</div>

除了链接到HTML块中的资源之外，我还注意到了我所看到的片段中的button元素！

语义中的句段过渡不起作用

1 个答案: