如何让 SplittingJS 处理两个不同的元素？

Question

好吧，所以我试图让两个单独的 div 在将父元素悬停到两个 div 时具有 Splitting.js 效果。问题是它只适用于第一个 div，而不适用于两个。

由于此代码的使用方式，不可能将文本仅放入一个 div 中 - 它们必须是分开的（它们使用 z-index 分层。因此 headertitleone 的 z-index 为 0，然后有一个它们之间的图像，然后 headertitletwo 是 z-index 4 的顶层）

这是代码：

console.clear();

Splitting();

.headerobjects {
  width: 500px;
  height: 500px;
  position: relative;
  left: 5%;
}

.headertitleone {
  font-size: 5rem;
  color: black;
  position: absolute;
  top: 10px;
  left: 10px;
  font-family: serif;
}

.headertitletwo {
  font-size: 5rem;
  color: black;
  position: absolute;
  top: 80px;
  left: 20px;
  z-index: 4;
  font-family: serif;
}

.headertitleone {
  grid-area: 1;
  transition: opacity 0.4s cubic-bezier(0.445, 0.05, 0.55, 0.95), transform 0.4s cubic-bezier(0.445, 0.05, 0.55, 0.95);
}

.headertitleone .word {
  white-space: nowrap;
}

.headertitletwo .word {
  white-space: nowrap;
}

.headertitleone .char {
  display: inline-block;
  transform-origin: 50% 50% 0.4em;
  transition: transform 0.5s cubic-bezier(0.5, 0, 0, 1);
  transition-delay: calc(0ms + var(--char-index) * 25ms);
  backface-visibility: hidden;
  margin: 0 -0.02em;
}

.headertitletwo .char {
  display: inline-block;
  transform-origin: 50% 50% 0.4em;
  transition: transform 0.5s cubic-bezier(0.5, 0, 0, 1);
  transition-delay: calc(0ms + var(--char-index) * 25ms);
  backface-visibility: hidden;
  margin: 0 -0.02em;
}

.headertitleone:nth-child(2),
.headertitletwo:nth-child(2) {
  font-family: sans-serif;
}

.headertitleone:nth-child(2) .char,
.headertitletwo:nth-child(2) .char {
  transform: rotate3d(1, -0.5, 0, 90deg);
}

.headerobjects:hover .headertitleone:nth-child(1) {
  opacity: 0;
}

.headerobjects:hover .headertitletwo:nth-child(1) {
  opacity: 0;
}

.headerobjects:hover .headertitleone:nth-child(1) .char {
  transform: rotate3d(1, 0.3, 0, -90deg);
}

.headerobjects:hover .headertitletwo:nth-child(1) .char {
  transform: rotate3d(1, 0.3, 0, -90deg);
}

.headerobjects:hover .headertitleone:nth-child(2) {
  opacity: 1;
}

.headerobjects:hover .headertitletwo:nth-child(2) {
  opacity: 1;
}

.headerobjects:hover .headertitleone:nth-child(2) .char {
  transform: rotate3d(0, 0, 0, 90deg);
}

.headerobjects:hover .headertitletwo:nth-child(2) .char {
  transform: rotate3d(0, 0, 0, 90deg);
}

<link rel="stylesheet" href="https://unpkg.com/splitting/dist/splitting.css" />
<link rel="stylesheet" href="https://unpkg.com/splitting/dist/splitting-cells.css" />

<div class="headerobjects">
  <div class="headertitleone" data-splitting>lorem</div>
  <div class="headertitleone" data-splitting>lorem</div>
  <div class="headertitletwo" data-splitting>ipsum</div>
  <div class="headertitletwo" data-splitting>ipsum</div>
</div>

<script src="https://unpkg.com/splitting/dist/splitting.min.js"></script>

Answer 1

将每个封装成自己的

<div>

似乎会让库影响两者。请看下面的演示：

console.clear();

Splitting();

.headerobjects {
  width: 500px;
  height: 500px;
  position: relative;
  left: 5%;
}

.headertitleone {
  font-size: 5rem;
  color: black;
  position: absolute;
  top: 10px;
  left: 10px;
  font-family: serif;
}

.headertitletwo {
  font-size: 5rem;
  color: black;
  position: absolute;
  top: 80px;
  left: 20px;
  z-index: 4;
  font-family: serif;
}

.headertitleone {
  grid-area: 1;
  transition: opacity 0.4s cubic-bezier(0.445, 0.05, 0.55, 0.95), transform 0.4s cubic-bezier(0.445, 0.05, 0.55, 0.95);
}

.headertitleone .word {
  white-space: nowrap;
}

.headertitletwo .word {
  white-space: nowrap;
}

.headertitleone .char {
  display: inline-block;
  transform-origin: 50% 50% 0.4em;
  transition: transform 0.5s cubic-bezier(0.5, 0, 0, 1);
  transition-delay: calc(0ms + var(--char-index) * 25ms);
  backface-visibility: hidden;
  margin: 0 -0.02em;
}

.headertitletwo .char {
  display: inline-block;
  transform-origin: 50% 50% 0.4em;
  transition: transform 0.5s cubic-bezier(0.5, 0, 0, 1);
  transition-delay: calc(0ms + var(--char-index) * 25ms);
  backface-visibility: hidden;
  margin: 0 -0.02em;
}

.headertitleone:nth-child(2),
.headertitletwo:nth-child(2) {
  font-family: sans-serif;
}

.headertitleone:nth-child(2) .char,
.headertitletwo:nth-child(2) .char {
  transform: rotate3d(1, -0.5, 0, 90deg);
}

.headerobjects:hover .headertitleone:nth-child(1) {
  opacity: 0;
}

.headerobjects:hover .headertitletwo:nth-child(1) {
  opacity: 0;
}

.headerobjects:hover .headertitleone:nth-child(1) .char {
  transform: rotate3d(1, 0.3, 0, -90deg);
}

.headerobjects:hover .headertitletwo:nth-child(1) .char {
  transform: rotate3d(1, 0.3, 0, -90deg);
}

.headerobjects:hover .headertitleone:nth-child(2) {
  opacity: 1;
}

.headerobjects:hover .headertitletwo:nth-child(2) {
  opacity: 1;
}

.headerobjects:hover .headertitleone:nth-child(2) .char {
  transform: rotate3d(0, 0, 0, 90deg);
}

.headerobjects:hover .headertitletwo:nth-child(2) .char {
  transform: rotate3d(0, 0, 0, 90deg);
}

<link rel="stylesheet" href="https://unpkg.com/splitting/dist/splitting.css" />
<link rel="stylesheet" href="https://unpkg.com/splitting/dist/splitting-cells.css" />

<div class="headerobjects">
  <div>
    <div class="headertitleone" data-splitting>lorem</div>
    <div class="headertitleone" data-splitting>lorem</div>
  </div>  
  <div>
    <div class="headertitletwo" data-splitting>ipsum</div>
    <div class="headertitletwo" data-splitting>ipsum</div>
  </div>
</div>

<script src="https://unpkg.com/splitting/dist/splitting.min.js"></script>