Wix Velo中如何用JS实现延时显示文本框后隐藏指定元素

报错原因 #

你遇到的Cannot find name 'document'报错是Velo平台的沙箱机制导致的：Velo完全禁止直接访问原生DOM对象，所有原生DOM操作（包括document.getElementById、直接修改style属性等写法）在Velo环境中都无法运行，元素操作必须使用Velo官方提供的$w选择器API。

具体实现步骤 #

• 配置元素初始状态
  打开Wix编辑器选中首页的#text45文本元素，在右侧属性面板取消勾选「加载时可见」选项，保证页面打开时文本默认隐藏；#box2保持默认可见状态即可。

  不推荐在代码里写初始隐藏逻辑，可视化配置可以避免页面加载首帧出现元素闪一下再消失的问题。

• 写入页面逻辑代码
  打开编辑器底部的首页代码面板，将以下代码粘贴到页面顶层作用域（不要嵌套在其他自定义函数内部）：

$w.onReady(function () {
  // 页面所有元素加载完成后启动5秒计时
  setTimeout(() => {
    // 5秒后显示#text45，show()方法返回Promise，元素完全可见后触发then回调
    $w('#text45').show().then(() => {
      // #text45显示完成后隐藏#box2
      $w('#box2').hide();
    });
  }, 5000);
});

补充说明 #

• show()/hide()是Velo所有页面元素自带的显隐方法，默认带200ms淡入淡出过渡，如果不需要动画可以传参修改：$w('#text45').show('fade', {duration: 0})即可实现无动画直接显示。
• 所有元素操作必须放在$w.onReady()回调内部执行，否则会因为元素未完成渲染出现选择器匹配失败的问题。
• 请确认代码写在对应首页的代码面板中，不要写在全局母版页或其他子页面的代码区域，否则不会在首页加载时触发逻辑。

内容的提问来源于stack exchange，提问作者BrentH