Question

简短来说，我有三个div个容器border。每个内部都是div，背景颜色设置为100%宽度和高度。我的想法是，当我点击它们时，水应该从上到下排空。我是通过将内部div的高度从100%切换为0%来实现此目的的。然而，当然这只会让水漂浮起来。因此，我一直在寻找下午的大部分时间，并没有想出任何东西。我正在寻找一种最简单的方法，只是让它向后移动或翻转y轴，这样就不会那么困难了，可以吗？

无论如何，这里有一个代码笔，因为jsfiddle想要允许css动画，我想要做的事情。 https://codepen.io/anon/pen/NgYEKE

＆＃13;

function func1(buttonname) {
    var x = document.getElementById(buttonname).className;

    if (x = "full") {
        document.getElementById(buttonname).className = "empty";
    } else {
        document.getElementById(buttonname).className = "full";
    }
}

＆＃13;

.full {
    height: 100%;
    transition:height 2s;
 }

 .empty {
     height: 0%;
     transition: height 2s;
 }

＆＃13;

<body style="background-color:black;">
    <div style="display:flex;justify-content:center;align-content:center;">
        <div id="glass1" style="height:50px;width:25px;border:2px solid blue;margin: 3px;">
            <div id="water1" class="full"  style="width:100%;background-color:aqua;"></div>
        </div>
        <div id="glass2" style="height:50px;width:25px;border:2px solid blue;margin: 3px;">
            <div id="water2" class="full" style="width:100%;background-color:aqua;"></div>
        </div>
        <div id="glass3" style="height:50px;width:25px;border:2px solid blue;margin: 3px;">
            <div id="water3" class="full" style="width:100%;background-color:aqua;"></div>
        </div>
    </div>
    <div style="display:flex;justify-content:center;align-content:center;">
        <button id="button1" onclick="func1(this.innerHTML)">water1</button>
        <button id="button2" onclick="func1(this.innerHTML)">water2</button>
        <button id="button3" onclick="func1(this.innerHTML)">water3</button>
    </div>
</body>

＆＃13;

另一方面，我也相信我已经正确地编写了Javascript以在空类和完整类之间切换，但似乎只是单向工作，如果你知道我在那里做错了它也会有所帮助。

Answer 1

元素高度按设计从上到下开始，您可以在声明scaleY时使用bottom transform-origin转换。

<强>演示

＆＃13;

div {
  height: 200px;
  width: 50px;
  border: 1px solid;
}

div div {
  height: 100%;
  background: blue;
  transform-origin: bottom;
  transition: transform 2s;
}

div div:hover {
  transform: scaleY(0);
}

＆＃13;

<div>
  <div></div>
</div>

＆＃13;

Answer 2

2件事：

1。）在if条件下，它必须是x == "full"而不是x = "full"

2。）在下面的代码片段中，我将“水”设为absolute定位元素，设置为top: 0px; bottom: 0; right: 0; left: 0（无height设置）并动画/过渡{{1}设置，所以top始终保持为0。现在，“水”从顶部排空，您也可以从下到上再次点击“重新填充”它。（我还将CSS从内联移动到外部，以便更容易理解，BTW）

bottom

function func1(buttonname) {
	var x = document.getElementById(buttonname).className;

	if ((x == "full")) {
		document.getElementById(buttonname).className = "empty";
	} else {
		document.getElementById(buttonname).className = "full";
	}
}

body {
	background-color: black;
}
#glass1, #glass2, #glass3 {
	position: relative;
	height: 50px;
	width: 25px;
	border: 2px solid blue;
	margin: 3px;
}
.full {
	position: absolute;
	top: 0px;
	bottom: 0;
	left: 0;
	right: 0;
	transition: all 2s;
	background-color: aqua;
}
.empty {
	position: absolute;
	top: 100%;
	bottom: 0;
	left: 0;
	right: 0;
	transition: all 2s;
	background-color: aqua;
}

Answer 3

您可以将玻璃元素应用于相对位置，将水元素应用于底部的绝对位置

.glass { 
    position: relative;
}

.water {
    position: absolute;
    bottom: 0px;
}

并将这些类应用于您的元素：

<div class="glass" id="glass1" style="height:50px;width:25px;border:2px solid blue;margin: 3px;">
    <div class="water" id="water1" class="full"  style="width:100%;background-color:aqua;"></div>
    </div>

点击功能也出现错误

if (x = "full"){

分配变量，应使用==进行比较。我想这是一个演示错误

Answer 4

你的错误，你总是设置full状态。改为比较它完美无缺。

＆＃13;

function func1(buttonname) {
    var x = document.getElementById(buttonname).className;

    if (x == "full") {
        document.getElementById(buttonname).className = "empty";
    } else {
        document.getElementById(buttonname).className = "full";
    }
}

＆＃13;

.full {
    height: 100%;
    transition:height 2s;
 }

 .empty {
     height: 0%;
     transition: height 2s;
 }

＆＃13;

<body style="background-color:black;">
    <div style="display:flex;justify-content:center;align-content:center;">
        <div id="glass1" style="height:50px;width:25px;border:2px solid blue;margin: 3px;">
            <div id="water1" class="full"  style="width:100%;background-color:aqua;"></div>
        </div>
        <div id="glass2" style="height:50px;width:25px;border:2px solid blue;margin: 3px;">
            <div id="water2" class="full" style="width:100%;background-color:aqua;"></div>
        </div>
        <div id="glass3" style="height:50px;width:25px;border:2px solid blue;margin: 3px;">
            <div id="water3" class="full" style="width:100%;background-color:aqua;"></div>
        </div>
    </div>
    <div style="display:flex;justify-content:center;align-content:center;">
        <button id="button1" onclick="func1(this.innerHTML)">water1</button>
        <button id="button2" onclick="func1(this.innerHTML)">water2</button>
        <button id="button3" onclick="func1(this.innerHTML)">water3</button>
    </div>
</body>

＆＃13;

CSS动画缩小而不是向上

4 个答案: