Javascript：如果有东西可见，请将其混合

Question

我想要一些非常具体的东西。我开发了一个框架的虚拟现实体验。我有很多事件将对象的可见性设置为 "false"：

document.getElementById('button').setAttribute('visible', 'false')

现在我的问题是：当它们突然弹出时看起来不太好，但是当我尝试将它们混合在一起时，我需要为所有可见的对象制作动画。我可以制作一个脚本，说明当某些东西可见时它应该融入而不是弹出吗？

Answer 1

使用 A 帧，您需要创建一个动画元素作为 'button' 实体的子元素，然后将 begin 属性设置为命名事件：

<a-entity id="button" material="opacity: 1">
    <a-animation attribute="material.opacity"
           dur="1000"
           to="0"
           begin="myEvent"></a-animation>
</a-entity>

...

document.getElementById('button').emit('myEvent');

相关文档：

https://aframe.io/docs/0.8.0/introduction/javascript-events-dom-apis.html#emitting-an-event-with-emit

https://aframe.io/docs/0.8.0/core/animations.html

Answer 2

这只是一个使用 css 转换的简单示例，请注意您可以对同一元素执行多个转换。完整示例在这里 https://jsfiddle.net/9hvede11/ 我们有两个（可能更多）classes。在这种情况下，开始时元素有一个 .short class，然后由于某些事件，它变为 .large。 transition 属性是说如何完成从前一个状态的转换。

.short{
  width: 100px;
  height: 100px;
  background-color: green;
}
.large{
   transition: width .2s, height 2s, background-color 2s;
   height: 200px;
   background-color: red;
   width: 200px;
}

在纯 Javascript 中你有类似的东西：

button.addEventListener("click", function(){ //some event  
var div = document.getElementById("square");
div.className="large"; //change class 
});

Javascript：如果有东西可见，请将其混合

Javascript: If something gets visible blend it in

javascript

function

aframe

visible

blending