Создание объекта, который анимируется при изменении его атрибутов (т.е. видимый и т. Д.)

Question

Я просматривал вещи с анимацией в javascript и AngularJS, и я хотел бы создать объект javascript так, чтобы, если бы я написал что-то вроде

obj.visible = true

Полученный объект станет виден и другим подобным функциям.Есть ли такой способ определить объект, который изменится, когда изменится один из его атрибутов?Я знаю, что есть много доступных функций анимации, которые делают то же самое, но есть ли способ включить такие функции в объект javascript?

Answer 1

var obj = { /* your object content here */ }

// Now check if the object's 'visible' property has a value 'true' or not
//using if statement and changing visibility of an element based on the result

if (obj.visible == 'true') {
    someName.style.opacity = '1'
} else {
    someName.style.opacity= '0'
}

В приведенном выше примере someName является гипотетической переменной, назначенной элементу HTML, отображаемому из вашего объекта.

---

Проверьте приведенную ниже скрипту для примера изменения, а также переключения видимостииспользуя значение свойства объекта.

var obj = { a: '1', b: '2', c: '3', d: '4', visible: 'true' }
var someName = document.getElementById('someDiv');
var btn = document.querySelector('button');

someName.textContent = obj.a + obj.b + obj.c + obj.d;

function checkVisibility(){
    if (obj.visible == 'true') {
        someName.style.opacity = '1'
    } else {
        someName.style.opacity= '0'
    }
}

function changeVisibility(){
	if (obj.visible == 'true') {
  	obj.visible = 'false'
  } else {
  	obj.visible = 'true'
  }
  
  checkVisibility()
}

btn.addEventListener('click', changeVisibility);

#someDiv {padding: 5px; background-color: green;}

<button>
ClickMe
</button>
<div id="someDiv"></div>

jsFiddle: https://jsfiddle.net/yjpv1s13/

Answer 2

Вы можете легко запустить функцию, когда «свойству» присвоено другое значение, используя классы и методы получения / установки, например:

class AnimatedObject {  
  set visible(visibility) {
    // do something with visibility
    console.log("visibility is now", visibility);
  }
}

let obj = new AnimatedObject();

obj.visible = true;

obj.visible = "foo"