Почему эта инвертированная условная анимация не работает? - PullRequest
Новая
       80

Почему эта инвертированная условная анимация не работает?

0 голосов
/ 28 апреля 2020

Этот фрагмент кода должен расширять #bottombar при нажатии #topbar и скрывать его, пока высота #bottombar составляет 200 пикселей, но действует странно. Это почему? Заранее спасибо. 

<!DOCTYPE html>
<html>
    <style>
    #wire {
        display: block;
    }
    #topbar {
        background-color: rgba(240,240,240,1);
        cursor: pointer;
    }
    #bottombar {
        height: 0px;
        overflow: hidden;
        background-color: rgba(210,210,210,1);
    }
    </style>
    <body>
        <div id = "wire">
            <div id = "topbar" onClick = "expand()">Stuff</div>
            <div id = "bottombar">Other stuff</div>
        </div>
    </body>
    <script>
    function expand() {
        var timing = {
            duration: 400,
            fill: "forwards",
            easing: "ease-out"
        }
        var bottombar = document.getElementById('bottombar')
        if (bottombar.style.height == 0) {
            bottombar.animate([{height: "0px"},{height: "200px"}], timing);
        } else if (bottombar.style.height !== 0) {
            bottombar.animate([{height: "200px"},{height: "0px"}], timing);
        }
    }
    </script>
</html>

1 Ответ

1 голос
/ 28 апреля 2020

Я думаю, что вижу вашу проблему здесь. Существует различие между element.style и его текущим стилем. Этот ответ немного устраняет это различие.

Вот Статья разработчика Mozilla Network для getComputedStyle

Вот ваш код, который смотрит на текущий стиль Я уверен, что это то, что вы хотите. 

function expand() {
		var timing = {
			duration: 400,
			fill: "forwards",
			easing: "ease-out"
		}
		var bottombar = document.getElementById('bottombar')
		var bottombarComputedStyles = window.getComputedStyle(bottombar);
		var bottombarHeight = bottombarComputedStyles.getPropertyValue('height');

		if (bottombarHeight == "0px" || bottombarHeight == "0") {
			console.log(`height is 0 or 0px`);
			bottombar.animate([{height: "0"},{height: "200px"}], timing);
		} else {
			console.log(`height is neither 0 nor 0px. It is ${bottombarHeight}`);
			bottombar.animate([{height: "200px"},{height: "0"}], timing);
		}
	}
		#wire {
			display: block;
		}
		#topbar {
			background-color: rgba(240,240,240,1);
			cursor: pointer;
		}
		#bottombar {
			height: 0px;
			overflow: hidden;
			background-color: rgba(210,210,210,1);
		}
<div id = "wire">
	<div id = "topbar" onClick = "expand()">Stuff</div>
	<div id = "bottombar">Other stuff</div>
</div>
...