Javascript: Если что-то становится видимым, смешайте это

Question

Я хочу что-то действительно конкретное.Я разрабатываю vr-опыт с a-frame.У меня есть много событий, которые устанавливают видимость объекта на «ложь»:

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

Теперь мой вопрос: это выглядит не очень хорошо, когда они внезапно всплывают, но когда я пытаюсь смешать их, мне нужноанимация для всех объектов, которая становится видимой.Могу ли я сделать скрипт, который говорит, что когда что-то становится видимым, оно должно сливаться, а не всплывать?

Answer 1

В A-рамке вы захотите создать элемент анимации как дочерний элемент «кнопки», а затем установить атрибут 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/ У нас есть два (может быть больше) класса.В этом случае в начале элемент имеет класс .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 
});

Answer 3

Если вы можете и рады ссылаться на библиотеку jQuery, вы можете сделать это тривиально с

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

только для javascript, проверьте этот ответ:

Как сделатьэффект исчезновения с чистым JavaScript