CSS 3动画没有执行第一次被称为

所以...我有这个小网页有两个div，一个按钮，两个css类和一个javascript函数。CSS 3动画没有执行第一次被称为

这个想法是，当按下按钮时，该功能改变了div的css类，并用一个漂亮的转换隐藏它。当再次按下它，它的opossite：

的HTML：

<div id="div1" > 
    <div id="div2" > 
    Here be HTML stuffs. 
    </div> 
</div>

的JavaScript：

hideNShow(){ 

    var w = $('#div2'); 
    var height = w.outerHeight();  

    if(document.getElementById("div1").className=="hidden") 
     document.getElementById("div1").className="visible"; 
     document.getElementById("div1").style.height=height + "px"; 
    } else if (document.getElementById("div1").className=="visible") { 
     document.getElementById("div1").className="hidden"; 
     document.getElementById("div1").style.height=0 + "px"; 
    } 
}

而CSS类：

.visible { 
    visibility: visible; 
    opacity: 1; 
    transition: all 1s ease; 
} 
.hidden { 
    visibility: hidden; 
    opacity: 0; 
    height:0; 
    overflow: hidden; 
    transition: all 1s ease; 
}

按钮只是在不同div中引用该功能的按钮。

我现在的问题是，如果div1具有“隐藏”作为起始类（），它工作得很好（所有的转换按照预期的延迟按预期工作），但是如果起始类是“可见的”第一次按下按钮时，div会自动隐藏，忽略转换。

我环顾四周，什么都没发现。看来，第一个

编辑：修复了一个名称为div的代码上的错字。

来源

2015-05-29 Neuromante

你似乎缺少这一行'的document.getElementById（ “格”）style.height =身高+ “PX” 正确的'id';'因为它无法找到一个带有'id = div'的元素 –

您可以使用jQuery for div2，但为div1选择普通的JS。这很有趣:) – Anarion

你应该有一些默认的高度。将'height：auto'添加到'visible'类并检查。而且看起来你没有默认的任何课程。 –

尝试删除可见性：隐藏和可见性：可见

来源

2015-05-29 09:40:42 gopalraju

没有。没有工作。虽然div的行为与以前完全一样。 .. – Neuromante

最重要的，条件如果...的className = = '可见';否则如果... className =='hidden'不工作，因为＃div1没有任何这些类。

但无论如何，第一回合的动画将无法正常工作（元素将立即消失）。原因在于，在将.hidden类应用于重设高度为0之前，您必须明确设置＃div1的高度，而仅当元素具有CSS参数更改时，过渡才起作用。

在点击时设置高度时，在添加.hidden类之前还有一个问题 - 它不会再次转换。这与第三段from here中描述的问题相似。

function init() { 
 
    var div1 = document.getElementById('div1'); 
 
    div1.style.height = div1.clientHeight + 'px'; 
 
    
 
    function hideNShow(){  
 
     if (div1.className.split(' ').indexOf('hidden') < 0) { 
 
      div1.className += ' hidden'; 
 
     } 
 
     else { 
 
      div1.className = div1.className.replace(/(?:^|\s)hidden(?!\S)/g , ''); 
 
     } 
 
    } 
 
    document.getElementById('switch').addEventListener('click', hideNShow); 
 
} 
 
init();

.smooth { 
 
    transition: all 1s ease; 
 
} 
 

 
/*.visible { 
 
    visibility: visible; 
 
    opacity: 1; 
 
    transition: all 1s ease; 
 
}*/ 
 

 
.hidden { 
 
    /*visibility: hidden;*/ 
 
    height: 0 !important; 
 
    opacity: 0; 
 
    overflow: hidden; 
 
    /*transition: all 1s ease;*/ 
 
}

<button id="switch" style="margin-bottom:20px;">Switch</button> 
 

 
<div id="div1" class="smooth" style="background:#F9E6C1;"> 
 
    <div id="div2" > 
 
    Here be HTML stuffs. 
 
    </div> 
 
</div>

来源

2015-05-30 06:43:11

CSS 3动画没有执行第一次被称为

回答

相关问题