Question

基本上我的最终目标是从左到右获得淡出的文字效果，经过几天的反复试验，我最终到了这里。

该函数应该获取由类名确定的所有div，循环遍历div，并且每个div将其中的文本分配给字符串，然后迭代字符串中的每个字符并应用不透明度过渡效果。我试图让它工作，所以我可以判断转换是否会与for循环迭代同时发生，或者循环是否等到转换完成后再转到下一个字符，这样就不会将它转到我想要的位置。如果不知怎的话，我想的可能是一个递归算法，如果它可能的javascript（让循环转到下一个字符，并在第一个转换达到一定百分比时开始转换，以便原始转换触发下一个等等）

<DOCTYPE! Html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<style> .text{opacity: 0;} </style>
<script> 
function fadeDivs(){
    var divs = document.getElementsByClassName("text"); 
    for(i=0; i<divs.length(); i++){
        var string = divs[i].text();
        for(j=0; j<string.length(); j++){
            var letter = string.charAt(j);
            letter.style.transition = "opacity 1s ease 0s";
            letter.style.opacity = 1;
        }
    }
}
</script>
</head>
<body onload="fadeDivs()">
<div class="text"> this text should appear from left to right </div>
<div class="text"> this text should appear from left to right </div>
</body>
</html>

更新的尝试：将从1变为0，但不会从0变为1.

<DOCTYPE! Html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<style>
.text{opacity:1;}
}</style>
<script> 
function fadeDiv(string) {
    $(string).each(function() {
        var str = $(this).html();
        str = str.trim().split("");
        var newDiv = "";
        for (var i = 0, end = str.length; i < end; i++) {
            newDiv += '<span>' + str[i] + '</span>';}
        $(this).html(newDiv);
    });
}
$('document').ready(function() {
    var str= $('.text');
    fadeDiv(str);
    $("span").each(function(i) {
        $(this).animate({opacity:0},i*15);
    });
});
</script> 
</head>
<body>
<div class="text"> this text should appear from left to right </div>
<div class="text"> this text should appear from left to right </div>
</body>
</html>

Answer 1

更新：您的代码有一些错误：

使用divs.length而非divs.length();＆amp; string.length不是string.length();

因为长度为property而不是method。

使用var string = divs[i].innerHTML;代替var string = divs[i].text();

但你不应该那么简单地使用：

function fadeDivs(){
    var divs = document.getElementsByClassName("text"); 
    for(i=0; i<divs.length; i++){
        var string = divs[i];
        string.style.transition = "opacity 1s ease 0s";
        string.style.opacity = '1';
    }
}

Answer 2

您的代码中存在基本的Javascript问题以及您使用Javascript混合jQuery代码。

但是，除此之外，你不能做你想做的事情。对于元素，不能为每个字符应用CSS样式。 CSS样式应用于整个元素。所以，你的代码本身的前提是错误的。

你可以做两件事来实现你想要的。

将每个角色包裹在自己的span中，然后使用JS逐个更改opacity。
使用CSS3动画来达到此效果。

以下是使用CSS3动画的一个粗略示例：

.text {
    position: relative; width: 320px; height: 32px;
    -webkit-animation: fade 10s; animation: fade 10s;
}

.text::after {
    content:''; position: absolute; 
    height: 100%; background-color: #fff;
    -webkit-animation: slide 10s; animation: slide 10s;
}

@-webkit-keyframes slide {
    0% { left: 0; width: 100%; }
    100% { left: 100%; width: 0; }
}
@-webkit-keyframes fade {
    0% { opacity: 0; }
    100% { opacity: 1; }
}
@keyframes slide {
    0% { left: 0; width: 100%; }
    100% { left: 100%; width: 0; }
}
@keyframes fade {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

<div class="text"> this text should appear from left to right </div>
<div class="text"> this text should appear from left to right </div>

Answer 3

要为每个字母的不透明度设置动画，您必须将所有字母放在span元素中，如果您有大量文字，则效率不高。我更喜欢定义svg linearGradient，mask文本并使用JavaScript来设置x1和x2值的动画，这样可以准确地显示您正在尝试的内容实现。

注意： CSS mask媒体资源无法在Chrome上运行，请在下方查看Chrome的解决方法。

＆＃13;

var grad = document.getElementById('gradient');
var animSpeed = 70;

for (i = 0; i < 50; 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;

.text {
  mask: url(#mask);
}

＆＃13;

<div class="text">This text should appear from left to right</div>
<div class="text">This text should appear from left to right</div>
<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 y="0" width="1" height="1" fill="url(#gradient)" />
    </mask>
  </defs>
</svg>

＆＃13;

Chrome的解决方法

我们的想法是不使用CSS mask属性。为此，我删除了div并添加了svg text个元素，并在HTML中应用了mask。

＆＃13;

var grad = document.getElementById('gradient');
var animSpeed = 25;

for (i = 0; i < 120; 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="5%" 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>
  <text x="2" y="12" mask="url(#mask)">This text should appear from left to right</text>
  <text x="2" y="27" mask="url(#mask)">This text should appear from left to right</text>
</svg>

＆＃13;

Answer 4

所以基于上面的更新，我最终在这里，它完美地工作。感谢大家的努力和投入。

这样做是将所有div与文本类一起使用，并创建一个包含在span标签中的新字符串，以便单独隐藏它们并允许增加淡入淡出效果

<DOCTYPE! Html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<style>
span{display: none;}
}</style>
<script> 
function fadeDiv(string) {
    $(string).each(function() {
        var str = $(this).html();
        str = str.trim().split("");
        var newDiv = "";
        for (var i = 0, end = str.length; i < end; i++) {
            newDiv += '<span>' + str[i] + '</span>';}
        $(this).html(newDiv);
    });
}
$('document').ready(function() {
    var str = $('.text');
    fadeDiv(str);
    $("span").each(function(i) {
        $(this).delay(i*50).fadeIn(300);
    });
});
</script> 
</head>
<body>
<div class="text"> this text should appear from left to right </div>
<div class="text"> this text should appear from left to right </div>
</body>
</html>

无法通过javascript添加不透明度转换

4 个答案:

Chrome的解决方法