html - 通过向右滑动从左侧显示隐藏的字母

Question

我想使内容具有动画效果，以便字母从“T”向右滑入。

这是一个jsfiddle以下:

.two {
  width: auto;
  -webkit-transition: all 1s ease;
}
.two:before {
  content: "T";
  width: auto;
}
.two:hover {
  width: auto;
}
.two:hover:before {
  display: none;
}
.two:hover:after {
  content: "This is a Label";
  width: auto
}

<div class="two">
</div>

Answer 1

从左到右动画化每个字母的不透明度:

您可以通过组合 svg 来为每个字母的不透明度设置动画。的 linearGradient和 mask并使用 JavaScript 移动 x1和 x2 linearGradient 的属性在 mouseover和 mouseleave事件。

var grad = document.getElementById('gradient');
// higher 'animSpeed' yeilds lower speed
var animSpeed = 20;
var two = document.getElementsByClassName('two')[0];

two.addEventListener('mouseenter', function() {
  for (i = 0; i < two.offsetWidth; i++) {
    var anim = setTimeout(function() {
      var x1 = (parseInt(grad.getAttribute('x1').slice(0, -1), 10) + 1) + '%';
      var x2 = (parseInt(grad.getAttribute('x2').slice(0, -1), 10) + 1) + '%';
      grad.setAttribute('x1', x1);
      grad.setAttribute('x2', x2);
    }, animSpeed * i)
  }
});

two.addEventListener('mouseleave', function() {
  for (i = 0; i < two.offsetWidth; i++) {
    var anim = setTimeout(function() {
      var x1 = (parseInt(grad.getAttribute('x1').slice(0, -1), 10) - 1) + '%';
      var x2 = (parseInt(grad.getAttribute('x2').slice(0, -1), 10) - 1) + '%';
      grad.setAttribute('x1', x1);
      grad.setAttribute('x2', x2);
    }, animSpeed * i)
  }
})

<svg>
  <defs>
    <linearGradient id="gradient" x1="-15%" y1="0%" x2="0%" y2="0%">
      <stop stop-color="white" offset="0" />
      <stop stop-color="black" offset="1" />
    </linearGradient>
    <mask id="mask" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox">
      <rect width="1" height="1" fill="url(#gradient)" />
    </mask>
  </defs>
  <foreignObject width="90px" height="100%" x="2" y="12" mask="url(#mask)">
    <div class="two">This is a label</div>
  </foreignObject>
</svg>

---

从左向右滑动:

你可以 transition transform属性(property)。

Updated Fiddle

.two {
  display: block;
  width: 300px;
  padding: 15px;
}
.two:before {
  content: "T";
}
.two:hover:before {
  display: none;
}
.two:after {
  position: absolute;
  content: "This is a Label";
  transform: translateX(-150%);
  transition: transform 1s ease;
}
.two:hover:after {
  content: "This is a Label";
  transform: translateX(0%);
}

<div class="two"></div>