0

我正在尝试使用 JavaScript 和 CSS3 创建淡出和淡出效果。目标是在单击时缩小 div 的宽度，并使其中包含的文本同时淡出。然后当再次单击它时，div 会扩展回正常宽度，并且文本会淡入。

这是HTML：

<div id="box1" onclick="slide1()">
<p class="fader">Lorem ipsum.</p>
</div>

这是CSS：

  #box1 {
position:relative;
left:0%;
top:0%;
width: 70%;
height: 100%;
background-color: #666;
z-index:4;
}

这是javascript：

var box1
var fader

window.onload = function() {
    box1 = document.getElementById('box1');
    fader = document.getElementsByClassName('fader');
    } 

function slide1(){

if(box1.style.width=='10%'){
box1.style.width='70%';
fader[0].style.opacity='1';
fader[0].style.transition='opacity 0.25s ease-in';
    }
 else {
    box1.style.width='10%';
 fader[0].style.opacity='0';
    fader[0].style.transition='opacity 0.75s ease-in';
 }
}

它适用于淡出，但对于淡入，它会立即从 0 不透明度过渡到 1 不透明度......没有淡入。有任何想法吗？

4

2 回答 2

0

我猜你甚至使用Firefox或Opera？我认为您的代码不适用于 safari 或 chrome，因为在这些浏览器上转换需要 webkit-prefix。您可以使用以下代码获得过渡支持：

var transform = (function () {
    var transforms = [
        'OTransform',
        'MozTransform',
        'msTransform',
        'WebkitTransform'
        ], transform = 'transform';

    while (transform) {
        if (document.body.style[transform] === undefined) {
            transform = transforms.pop();

        } else {
            return transform;

        }

    }

    return false;

}());

当我使用 CSS 过渡时，有时我会更改过渡样式，然后让浏览器在更改其他样式之前更新更改。您可以通过超时来执行此操作。在某些浏览器上，我注意到动画无法正常工作，除非这样做（某些 firefox 浏览器）。

fader[0].style.transition='opacity 0.75s ease-in';
setTimeout(function () {
    box1.style.width='10%';
    fader[0].style.opacity='0';
}, 4);
于 2012-12-16T20:56:26.190 回答
0

实际上，我不久前就同样的问题问了一个非常相似的问题：不透明度效果从 1.0 到 0，但不是 0 到 1.0。检查出来，看看它是否适合你。

否则，请尝试向推子元素添加一个类，而不是添加样式声明。然后，在您的实际 CSS 中，编写推子元素转换的代码。

于 2012-12-17T02:05:08.963 回答