i want something really specific. I develop an vr-experience with a-frame. I have many events which sets the visibility of an object to "false":
document.getElementById('button').setAttribute('visible', 'false')
Now my Question: It dosn´t look well when they suddenly pop up but when i try to blend them in i need an animation for all objects which gets visible. Can i make an script which says when something gets visible it should blend in instead of poping up?
With A-frame, you'll want to create an animation element as a child of the 'button' entity, then set the begin attribute to be a named event:
<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');
Relevant documentation:
Just a simple example using css transitions, note that you could perform several transitions on the same element. Full example Here https://jsfiddle.net/9hvede11/
We have two (could be more) classes. In this case in the beginning the element have a .short class, then because of some event, it changes to .large. The transition property is saying how to accomplish the transition from the previous state.
.short{
width: 100px;
height: 100px;
background-color: green;
}
.large{
transition: width .2s, height 2s, background-color 2s;
height: 200px;
background-color: red;
width: 200px;
}
in pure Javascript you have something like:
button.addEventListener("click", function(){ //some event
var div = document.getElementById("square");
div.className="large"; //change class
});
