使用dojo淡入/淡出文本和循环

wn9m85ua 于 2022-12-16 发布在 Dojo

关注(0)|答案(1)|浏览(276)

我的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();

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

dojo

来源：https://stackoverflow.com/questions/46242529/fade-in-out-text-and-loop-using-dojo

1条答案

按热度按时间

bgtovc5b1#

您可以简单地通过使用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>

赞(0）回复(0）举报 2022-12-16

我来回答

使用dojo淡入/淡出文本和循环

1条答案

相关问题

热门标签

最新问答