Question

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

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

现在我的问题：当它们突然弹出时它看起来不太好但是当我尝试将它们混合在一起时我需要一个动画来显示所有可见的物体。我可以创建一个脚本，说明当某些内容可见时它应该混合而不是弹出？

Answer 1

如果您能够并且很乐意引用jQuery库，则可以使用

进行简单的操作

$("#element-id").fadeIn();

仅限javascript，请查看以下答案：

How to make fadeOut effect with pure JavaScript

Answer 2

使用A-frame，您需要创建一个动画元素作为“按钮”实体的子元素，然后将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 3

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

.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：如果有可见的东西混合它

3 个答案: