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

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＆＃39; linearGradient和mask并使用JavaScript来移动x1和{{来设置每个字母的不透明度。 1}} x2 linearGradient和mouseover事件的mouseleave属性。

＆＃13;

＆＃13;

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)
  }
})

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

---

从左向右滑动：

您可以transition transform属性。

的 Updated Fiddle

＆＃13;

＆＃13;

.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%);
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

使用:before掩码

显示字母

如果您只想使用CSS，我们可以创建一个在文本上滑动的面具，然后向右推动以显示div中的文本。

实施例

＆＃13;

＆＃13;

.two {
  width: 100px;
  position: relative;
  overflow: hidden;
}
.two:before {
  content: '';
  position: absolute;
  left: 0.6em;
  top: 0;
  height: 100%;
  width: 100%;
  background: #FFF;
  transition: left 1s;
}

.two:hover:before {
left: 100%;
}

.color:before {
  background: #F00;  
}

＆＃13;

<div class="two">This is a Label</div>

It looks like this (hover):

<div class="two color">This is a Label</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

只有:before和:after psuedo元素才能实现这一点。我建议采用另一种类似的方法。

/* start SLIDE-IN code */

.two > .capitalT > .else {
  position: relative;
  left: -100px;
  opacity: 0;
  transition: left 0.5s, opacity 0.5s;
}
.two > .capitalT:hover > .else {
  left: 0;
  opacity: 1;
}
/* end SLIDE-IN code */

<div class="two"><span class="capitalT"><span class="t">T</span><span class="else">his is a Label</span></span>
</div>

Answer 4

CSS原则上无法为自动值设置动画。所以考虑一下

.two:hover::after{ width: 100px;}

（http://jsfiddle.net/k2wou9eh/1/）或其他选项。