Question

我试图通过点击按钮使div或p元素可见。 JavaScript中的类似内容：

document.getElementById("id").style.transition="visibility";
document.getElementById("id").style.visibility="visible";

这可能吗？或者我只是做错了？

Answer 1

以下代码说明了两种显示隐藏元素的方法（在DIV或P标记上工作得很好）。主要区别：具有可见性的元素：隐藏仍然占据页面上的空间，即其他元素环绕它 - 具有显示的元素：无不影响其他元素的包装或位置。

<html>
<head>
<style type="text/css">
  #p1 { visibility: hidden; }
  #p2 { display: none; }
</style>
<script type="text/javascript">
  function btn1click() {
    document.getElementById("p1").style.visibility = "visible";
  }
  function btn2click() {
    document.getElementById("p2").style.display = "block";
  }
</script>
</head>
<body>
  <button id="btn1" onclick="btn1click()">button 1</button>
  <button id="btn2" onclick="btn2click()">button 2</button>
  <p id="p1" style="visibility: visible;">Paragraph one</p>
  <p id="p2" style="display: block;">paragraph two</p>
</body>
</html>

这是一个JSfiddle，所以你可以测试它http://jsfiddle.net/jrulle/3u5Z2/

首先尝试按下第二个按钮，以查看可见性和显示效果的不同。

Answer 2

假设您想使用转换来淡化元素，一种方法是使用CSS（可以利用硬件加速将重绘卸载到GPU，如果它可用）。

为了做到这一点，我们可以简单地指定一个CSS动画来运行所有要添加的元素，因为我将所有元素添加到同一容器元素中，这可以通过以下方式实现：

#container * {
    /* Webkit 35: */
    -webkit-animation: fadeIn 1s linear;
    /* Firefox 28, Opera 22, IE 11: */
    animation: fadeIn 1s linear;
}

加载页面时，将运行指定的动画;动画是：

/* defining an animation '@keyframes', naming the animation 'fadeIn': */
@keyframes fadeIn {
    /* the starting point: */
    from {
        /* the starting property and property-value: */
        opacity: 0;
    }
    /* the finishing point: */
    to {
        /* the finishing property and property-value: */
        opacity: 1;
    }
}

（-webkit-prefixed版本在链接演示中，除了包含供应商前缀@-webkit-keyframes）的前几个字符外完全相同。

要添加元素，我们使用几乎完全随意的JavaScript：

function createElem () {
    // gets the value of the first 'select' element contained within
    // a 'label' element:
    var elemType = document.querySelector('label select').value.toLowerCase(),
        // creates a new element, and retains a reference to that
        // created-element:
        elem = document.createElement(elemType);

    switch (elemType) {
        // if we created an 'input' or a 'textarea'
        case 'input':
        case 'textarea':
            // we set the value property of that element to the string:
            elem.value = 'created a new ' + elemType + ' element.';
            break;
        // if we created an 'img' element:
        case 'img':
            // we set the 'alt' property:
            elem.alt = 'created a new ' + elemType + ' element.';
            break;
        // otherwise we assume the default is true,
        default:
            // and we set the textContent of the element:
            elem.textContent = 'created a new ' + elemType + ' element.';
            break;
    }
    // in all cases we set the 'title' property:
    elem.title = 'created a new ' + elemType + ' element.';
    // and we add the created-element to the element with the 'id' of
    // 'container'
    document.getElementById('container').appendChild(elem);
}

// add a 'click' event-handling function to the (first) 'button' element:
document.querySelector('button').addEventListener('click', createElem);

JS Fiddle demo

参考文献：

CSS：
- Using CSS Animations。
JavaScript的：
- document.createElement()。
- document.getElementById()。
- document.querySelector()。
- EventTarget.addEventListener()。
- Node.appendChild()。
- Switch () {...} statement。

onClick转换并使其可见

2 个答案: