Search code examples
javascriptfunctionaframevisibleblending

Javascript: If something gets visible blend it in

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?

Solution

  • 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 
});