使用 dojo 淡化 In/Out 文本和循环

Question

我的 html 模板具有以下 div：

<div dojoAttachPoint="container" class="container">
        <span dojoAttachPoint="searchingForMore" id="searchingForMore" class="searchingForMore"></span>
    </div>

我还有一个功能，可以让我的两个文本淡入淡出一次。

_alternateSearchingProvText: function () {
    var node = dom.byId("searchingForMore");
    node.innerHTML = "first text";
    fx.fadeOut({
        node: node,
        duration: 60000,
        onEnd: function() {
            node.innerHTML = "Second text";
            dojo.fadeIn({
                node: node
            }).play()
        }
    }).play();

我想周期性地循环执行此操作，直到视图从屏幕上消失。我该如何实现？

Answer 1

您可以简单地通过使用 setInterval js 函数来实现这一点，它会在指定时间（以毫秒为单位）触发动画，

所以如果你的动画持续时间是 3s 那么间隔的超时应该是 2 times 动画持续时间

您可以看到下面的工作片段，其中我使用了 setInterval ，并在最后一次对话框关闭时停止了它（使用 clearInterval）。

require(["dijit/Dialog","dojo/_base/fx","dijit/registry","dojo/dom","dojo/ready","dijit/form/Button"],
 function(Dialog,fx,registry,dom,ready,Button){
    var interval;
    var duration = 4000;
    var text = "First text";
    var node;
    
   ready(function(){
      registry.byId("btn").on("click",function(e){
          followUpDialog.show();
          annimation();
      });
      
      var dialogContent = ' <span dojoAttachPoint="searchingForMore" id="searchingForMore" class="searchingForMore"></span>';
      
      
      
      // instantiate new custom dialog
      var followUpDialog = new Dialog({
        id:'myDialog',
        title: "Create new follow-up",
        content: dialogContent,
        style: "width: 730px",
        onShow: function() {
          node = dom.byId("searchingForMore");
          
          node.innerHTML = text;
          interval = setInterval(function(){
            annimation();
            
          },duration*2)
        },
        onHide: function () {
          clearInterval(interval);
        }
      });
      
      function annimation() {
        text = text == "First text" ? "Second text" : "First text";
            
        fx.fadeOut({
            node: node,
            duration: duration,
            onEnd: function() {
              node.innerHTML = text;
              fx.fadeIn({
                node: node,
                duration: duration
              }).play();;
            }
        }).play();  
      }
    });
  }
);

<script type="text/javascript">
  dojoConfig = {isDebug: true, async: true, parseOnLoad: true}
</script>

<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>
<link href="//ajax.googleapis.com/ajax/libs/dojo/1.8.3/dijit/themes/claro/claro.css" rel="stylesheet"/>
<body class="claro">
  <div data-dojo-type="dijit/form/Button" id="btn"> click me </div>
</body>

使用 dojo 淡化 In/Out 文本和循环

Fade In/Out text and Loop using dojo

javascript

dojo