Question

我正在尝试使用线性渐变背景色和动画获得动画文本背景色。我正在尝试获得这个确切的动画https://happy-online.nl/（第一个文本优先的动画）。问题在于第二部分（文本的颜色保留）运行不正确。第一个几乎按预期运行（在文本上方显示黄色条）

我现在正在做的很简单：

在500毫秒后添加具有进入效果的特定课程
在1000毫秒后添加特定的类，并具有效果

这两种效果几乎完全相同，第一种应从左到右进入黄色的文本，第二种应进入黑色的文本，以使文本可见（透明地开始）

<script>
        $(document).ready(function () {
            $('.fadeIn').fadeIn({queue: false, duration: 'slow'})
                .css({top:200,position:'absolute'})
                .animate({top:0}, 1000, function() {});

            setTimeout(function() {
                $('.animate-text').addClass('get-in-effect')
            }, 500);
            setTimeout(function() {
                $('.animate-text').addClass('get-out-effect')
            }, 1500);

        });
    </script>

和CSS：

.animate-text {
    background-color: black;
    background-size: 200% 100%;
    background-position: right bottom;
    color: transparent;
}
.get-in-effect {
    background: linear-gradient(to right, #f6cf35 50%, black 50%);
    background-size: 200% 100%;
    background-position: left bottom;
    transition: all .5s ease-out;
}
.get-out-effect {
    background: linear-gradient(to left, #f6cf35 50%, black 50%);
    transition: all .5s ease-out;
    background-size: 200% 100%;
    background-position: left bottom;
    color: #f6cf35;
}

最后，我的HTML：

<h1 style="color:#f6cf35"><span class="animate-text">test</span>  </h1>

这里是我当前代码https://jsfiddle.net/chaibialaa/vxjL6ow0/3/的小提琴

谢谢

Answer 1

尝试一下。

$(document).ready(function () {
  $('.fadeIn').fadeIn({queue: false, duration: 'slow'})
    .css({top:200,position:'absolute'})
    .animate({top:0}, 1000, function() {});
  setTimeout(function() {
    $('.animate-text').addClass('get-in-effect')
  }, 500);
  setTimeout(function() {
    $('.animate-text').removeClass('get-in-effect')
    $('.animate-text').addClass('between')
  }, 1000);
  setTimeout(function() {
    $('.animate-text').addClass('get-out-effect')
  }, 1500);
});

.animate-text {
    background-color: black;
    background-size: 200% 100%;
    background-position: right bottom;
    color: transparent;
}
.get-in-effect {
    background: linear-gradient(to right, #f6cf35 50%, black 50%);
    background-size: 200% 100%;
    background-position: left bottom;
    transition: all 0.5s ease-out;
}
.between {
  background-color: #f6cf35;
}
.get-out-effect {
    background: linear-gradient(to right, black 50%, #f6cf35 50%);
    transition: all 0.5s ease-out;

    background-size: 200% 100%;
    background-position: left bottom;
    color: #f6cf35;
}

除非您再次取消第一堂课，否则过渡似乎并不想再次进行。为了使其具有黄色背景（而不是恢复为黑色），您可以在两者之间添加另一个类来设置背景颜色。

线性渐变动画进出

1 个答案: