Question

我一直在浏览javascript和AngularJS中的动画，我想创建一个javascript对象，如果我要编写像

这样的东西

obj.visible = true

生成的对象将变为可见和其他类似的功能。有没有这样的方法来定义一个在其中一个属性发生变化时会发生变化的对象？我知道有很多动画函数可以做同样的事情，但有没有办法将这些函数合并到一个javascript对象中？

Answer 1

通过使用类和getter / setter将“property”设置为不同的值，可以轻松运行函数：

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"

Answer 2

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/

创建在更改其属性时动画的对象（即可见等）

2 个答案: