javascript - 纯 Javascript 中的滑动切换

Question

如您所见，我已经修复了一种文本框，当有人将鼠标悬停在该图像上时，该文本框会弹出，但老实说，我想要一个缓慢上升的向上滑动效果。必须完全使用纯 JavaScript(请不要使用 jQuery!)。任何人都知道我该怎么做。

function show(myText) {
  var elements = document.getElementsByClassName(myText)
  
  for(var i = 0; i < elements.length; i++){
      elements[i].style.visibility = "visible";
  }
} 

function hide(myText) {
  var elements = document.getElementsByClassName(myText)
  
  for(var i = 0; i < elements.length; i++){
      elements[i].style.visibility = "hidden";
  }
}

.text1 {
	position: relative;
	bottom: 28px;
	text-align: center;
	background-color: grey;
	width: 100%;
	height: 10%;
	font-size: 20px;
	color: white;
	opacity: 0.7;
	display: block;
	visibility: hidden;
}

.text2 {
	position: relative;
	bottom: 28px;
	text-align: center;
	background-color: grey;
	width: 100%;
	height: 10%;
	font-size: 20px;
	color: white;
	opacity: 0.7;
	display: block;
	visibility: hidden;
}

<div class="row">
  <div class="col-md-6 col-sm-12">
    <div class="tumb-wrapper">
      <a href="http://www.bbc.com" target="_blank" class="image" onmouseover="show('text1')" onmouseout="hide('text1')">
      <img src="https://i.vimeocdn.com/portrait/8070603_300x300" class="project" alt="print-screen"/>
       <div class="text1">AAA</div>
      </a>
    </div>
  </div>
  <div class="col-md-6 col-sm-12">
    <div class="tumb-wrapper">
      <a href="http://www.cnn.com" target="_blank" class="image" onmouseover="show('text2')" onmouseout="hide('text2')">
      <img src="https://lh6.ggpht.com/mSKQgjFfPzrjqrG_d33TQZsDecOoVRF-jPKaMDoGIpMLLT1Q09ABicrXdQH6AZpLERY=w300" class="project" alt="print-screen"/>
      <div class="text2">BBB</div>
      </a>
    </div>
  </div>
</div>

Answer 1

这是它的一个版本，它完全没有 javascript，只使用 CSS。我将很快通过添加少量 javascript 对其进行编辑(当前版本要求您具有固定大小)。

.caption {
  height: 250px;
  width: 355px;
  overflow: hidden;
}
.caption-image {
  height: 100%;
}
.caption-text {
  color: white;
  padding: 10px;
  background: rgba(0, 0, 0, 0.4);
  transition: transform 400ms ease;
}
.caption-image:hover + .caption-text,
.caption-text:hover {
  transform: translateY(-100%);
}

<div class="caption">
  <img class="caption-image" src="http://faron.eu/wp-content/uploads/2013/05/Cheese.jpg" />
  <div class="caption-text">Some words about how cheesy it is to use a picture of cheese for this example!</div>
</div>

<div class="caption">
  <img class="caption-image" src="https://top5ofanything.com/uploads/2015/05/Tomatoes.jpg" />
  <div class="caption-text">There's nothing witty to say about a tomato, maybe some you say I say stuff. But honstly I can't think of anything...</div>
</div>

带有 JS 尺寸的版本:

基本上是相同的想法，但是当页面加载时它会设置特定的样式，因此图像可以是您喜欢的任何大小。

var captionSel = document.querySelectorAll('.caption');

for (let i = 0; i < captionSel.length; i++) {
  let image = captionSel[i].querySelector(":scope > .caption-image");
  let text = captionSel[i].querySelector(":scope > .caption-text");
  text.style.width = image.clientWidth - 20 + "px";
  captionSel[i].style.height = image.clientHeight + "px";
}

.caption {
  overflow: hidden;
}
.caption-text {
  color: white;
  padding: 10px;
  background: rgba(0, 0, 0, 0.4);
  transition: transform 400ms ease;
}
.caption-image:hover + .caption-text,
.caption-text:hover {
  transform: translateY(-100%);
}

<div class="caption">
  <img class="caption-image" src="http://faron.eu/wp-content/uploads/2013/05/Cheese.jpg" />
  <div class="caption-text">Some words about how cheesy it is to use a picture of cheese for this example!</div>
</div>

<div class="caption">
  <img class="caption-image" src="https://top5ofanything.com/uploads/2015/05/Tomatoes.jpg" />
  <div class="caption-text">There's nothing witty to say about a tomato, maybe some you say I say stuff. But honstly I can't think of anything...</div>
</div>