我的UI影片使用javascript添加和洗掉影片類很草率——有沒有更好的方法？

我正在嘗試為博客制作此新聞項組件界面。每個專案顯示一個故事影像和文章的一些文本。滾動新聞專案應該“壓縮”影像并顯示文章的更多文本。我不明白為什么當您滾動專案時我的影片不保持，然后在執行“解壓”之前它會完全重置。

有附加和分離專案的關鍵幀影片：

@keyframes scrunch {
  from {
    height: 50%;
  }

  to {
    height: 10%;
  }
}

@keyframes unscrunch {
  from {
    height: 10%;
  }

  to {
    height: 50%;
  }
}

.scrunch {
  animation: scrunch 1s;
}

.unscrunch {
  animation: unscrunch 1s;
}

然后我只是從新聞專案類串列中添加和洗掉這些類：

const scrunchyBox = document.getElementById('scrunchyBox1');
const children = scrunchyBox.childNodes;
console.dir(children);
const scrunchyBoxHead = children[1];

scrunchyBox.addEventListener('pointerover', (event) => {
  scrunchyBoxHead.classList.remove('unscrunch');
  scrunchyBoxHead.classList.add('scrunch');
});

scrunchyBox.addEventListener('pointerout', (event) => {
  scrunchyBoxHead.classList.remove('scrunch'); 
  scrunchyBoxHead.classList.add('unscrunch');
});

看起來很基本，但無論我做什么看起來都很惡心。我所做的一切都在我的 Codepen 上結束了。

uj5u.com熱心網友回復：

您可以將該transition屬性與:hover偽類一起使用。這將與您嘗試使用 javascript 所做的相同。

為此，只需在 css 檔案中添加幾行即可。

/* new block */
.scrunchyBox:hover .sectionHead {
  height: 10%;
}
/* new block */
.scrunchyBox:hover .datedot {
  transform: scale(0.45) translate(60px, -72px);
}

.scrunchyBox > .sectionHead {
  transition: all 0.5s ease-in-out; /* new line */
}
.datedot {
  transition: all 0.5s ease-in-out; /* new line */
}

顯示代碼片段

body {
  background-color: #ccc;
  font-size: 18px;
}

.scrunchyBox {
  color: #333;
  position: relative;
  background-color: #fff;
  width: 400px;
  height: 400px;
  margin: 0 auto;
  padding: 20px;
  overflow: hidden;
  filter: drop-shadow(4px 4px 4px #333);
}

/* new block */
.scrunchyBox:hover .sectionHead {
  height: 10%;
}
/* new block */
.scrunchyBox:hover .datedot {
  transform: scale(0.45) translate(60px, -72px);
}

.scrunchyBox > .sectionHead {
  width: 400px;
  height: 250px;
  background-color: #3ab7f4;
  padding: 0;
  margin: 0 auto;
  transition: all 0.5s ease-in-out; /* new line */
}

.datedot {
  position: absolute;
  top: 30px;
  right: 30px;
  background-color: rgba(0, 0, 0, 0.3);
  padding: 12px;
  border-radius: 60px;
  width: 60px;
  height: 60px;
  transition: all 0.5s ease-in-out; /* new line */
}

.datedot > span {
  font-family: 'Trebuchet MS', sans-serif;
  color: rgba(255, 255, 255, 1);
  text-align: center;
  display: block;
  margin: 0;
}

.datedot > span.day {
  font-size: 2.2em;
  font-weight: bold;
  line-height: 0.8em;
  padding: 0;
}

.datedot > span.month {
  font-size: 1.3em;
  font-weight: normal;
  text-transform: uppercase;
  padding: 0;
}

.scrunchyBox > h2 {
  font-family: 'Trebuchet MS', sans-serif;
  font-size: 1.2em;
  line-height: 1em;
  padding: 0;
}

.scrunchyBox > p {
  font-family: 'Georgia', serif;
  font-size: 1.4em;
}

<div id="scrunchyBox1" class="scrunchyBox">
  <div class="sectionHead">
    <div class="datedot">
      <span class="day">30</span>
      <span class="month">Oct</span>
    </div>
  </div>
  <h2>A Headline for the Scrunchy Box</h2>
  <p>
    This is some text that would normally be some text that the reader would want to see more of. It gets cut off here by other elements, but then other elements "scrunch" in order to reveal more of the text for a preview.
  </p>
</div>

uj5u.com熱心網友回復：

1. 您可以animation-fill-mode: forwards;按照對這個問題的回答中的描述將影片保留在其最終狀態：在 CSS3 影片結束時保持最終狀態

2. 如果你從盒子中間影片中移除指標，它仍然看起來很笨拙。我不知道為什么你不想簡單地使用 CSS:hover和過渡。

標籤：javascript 用户界面 css动画

上一篇：如何使白色按鈕在白色影像上可見

下一篇：Java：從檔案中讀取物件到不同的派生類中