Question

当您单击名为“en”的按钮更改语言时，我在javascript上有一个简单的功能。通过更改文本.text工作正常，但我有一个问题，是我用css和一些文本占位符创建了一个动画。让我告诉你。

HTML

<div id="languageWrapper">

            <img id="es" class="spanish" src="images/es.svg"/>
            <img id="en" class="english" src="images/en.svg"/>

</div>

这些是更改语言的按钮

我无法改变的内容就是这个

<div id="bannerWrapper">
        <div id="textWrapper">
            <h3 class="headerWrapper"></h3><br>
            <h3 class="subheaderWrapper"></h3>
        </div>
</div>

.headerWrapper和.SubheaderWrapper中的文本来自CSS文件

CSS

.headerWrapper {
position: relative;
color: #fff;
margin: 0 auto;
font-family: 'Montserrat', sans-serif;
font-size:40px;
}

.headerWrapper:after {
content: 'Header 1';
animation: faderText 30s cubic-bezier(.8,0,0,.8) infinite;
}

.subheaderWrapper {
position: relative;
color: #fff;
margin: 0 auto;
font-family: 'Raleway', sans-serif;
font-size:17px;
}

.subheaderWrapper:after {
content: 'Some small description of what We intent to say here in this banner 
number 1';
animation: faderText2 30s cubic-bezier(.8,0,0,.8) infinite;
}

@keyframes faderText {
0% {content: "¿Empresa vs Autónomo?";}
33.33% {content: "¿Qué impuestos paga mi Empresa?";}
66.66% {content: "¿Que visado necesitan mis empleados extranjeros?";}
100% {content: "¿Empresa vs Autónomo?";}
}

@keyframes faderText2 {
0% {content: "Te aconsejamos y creamos la mejor estructura según tu tipo de 
negocio";}
33.33% {content: "Nos encargamos de explicar , preparar y presentar tus 
impuestos periódicamente";}
66.66% {content: "Construimos un puente entre la compleja red de tramites al 
reubicar internacionalmente a un empleado";}
100% {content: "Te aconsejamos y creamos la mejor estructura según tu tipo de 
negocio";}
}

我想要实现的是，点击id #es将动画关键帧从faderText和faderText2更改为另一个不同的动画，内容为英文。这可能吗？在此先感谢!!

这也是我想要实现的Javascript （更改.headerwrapper：从faderText到faderTextEnglish之后的动画）所以在创建faderTextEnglish关键帧时，我可以用英语制作它们。）

$('#en').click(function(){
$('.headerWrapper:after').css('animation','faderTextEnglish 30s cubic-bezier(.8,0,0,.8) infinite');
});

有人可以提供帮助：D？谢谢！

Answer 1

添加css课程＆＃34;英语＆＃34;单击#en上的正文：

$('#en').click(function(){
    $('body').addClass('en');
});
$('#es').click(function(){
    $('body').removeClass('en');
});

并在css中将其更改为以下内容：

.headerWrapper:after {
content: 'foreign text';
animation: faderText 30s cubic-bezier(.8,0,0,.8) infinite;
}

body.en .headerWrapper:after {
content: 'english text';
animation: faderTextEn 30s cubic-bezier(.8,0,0,.8) infinite;
}

@keyframes faderText {
0% {content: "¿Empresa vs Autónomo?";}
33.33% {content: "¿Qué impuestos paga mi Empresa?";}
66.66% {content: "¿Que visado necesitan mis empleados extranjeros?";}
100% {content: "¿Empresa vs Autónomo?";}
}

@keyframes faderTextEn {
0% {content: "english version";}
33.33% {content: "english version";}
66.66% {content: "english version";}
100% {content: "english version";}
}

Answer 2

我会帮助你，但首先我必须通过使用它为你的HTML页面提供内容来警告你使用CSS的不良用法。顾名思义，CSS仅用于样式（这包括动画），而不是用于存储文本等数据。

我在CodePen上有一个解决方案的工作示例。 View it here

但是，关于你的问题，你不能用jQuery选择伪元素，例如：after。在这种情况下，您需要使用其他类，如以下示例所示：

将您的HTML保持为

<div id="languageWrapper">
    <img id="es" class="spanish" src="images/es.svg"/>
    <img id="en" class="english" src="images/en.svg"/>
</div>
<div id="bannerWrapper">
    <div id="textWrapper">
        <h3 class="headerWrapper"></h3><br>
        <h3 class="subheaderWrapper"></h3>
    </div>
</div>

现在，在你的CSS中，创建四个类，两个用于西班牙语的头和子头，两个用于英文的头和子头：.enTextHeader，.enTextSubheader，.esTextHeader，.esTextSubheader。您的CSS应如下所示：

.headerWrapper:after {
    content: 'Header 1';
    animation: faderText 30s cubic-bezier(.8,0,0,.8) infinite;
}

.subheaderWrapper:after {
    content: 'Some small description of what We intent to say here in this banner number 1';
    animation: faderText2 30s cubic-bezier(.8,0,0,.8) infinite;
}

body.en .headerWrapper:after {
  animation-name: faderTextEnglish;
}

body.en .subheaderWrapper:after {
  animation-name: faderText2English;
}

@keyframes faderText {
    0% {content: "¿Empresa vs Autónomo?";}
    33.33% {content: "¿Qué impuestos paga mi Empresa?";}
    66.66% {content: "¿Que visado necesitan mis empleados extranjeros?";}
    100% {content: "¿Empresa vs Autónomo?";}
}

@keyframes faderText2 {
    0% {content: "Te aconsejamos y creamos la mejor estructura según tu tipo de  negocio";}
    33.33% {content: "Nos encargamos de explicar, preparar y presentar tus impuestos periódicamente";}
    66.66% {content: "Construimos un puente entre la compleja red de tramites al reubicar internacionalmente a un empleado";}
    100% {content: "Te aconsejamos y creamos la mejor estructura según tu tipo de negocio";}
}

@keyframes faderTextEnglish {
    0% {content: "¿Company?";}
    33.33% {content: "¿LULZ?";}
    66.66% {content: "¿OKAY?";}
    100% {content: "¿NEWTEXT?";}
}

@keyframes faderText2English {
    0% {content: "¿Company Subheader?";}
    33.33% {content: "¿LULZ Subheader?";}
    66.66% {content: "¿OKAY Subheader?";}
    100% {content: "¿NEWTEXT Subheader?";}
}

您的jQuery代码应更新如下：

$(document).ready(function() {
  $('#en').click(function(){
    $('body').addClass('en');
  });

  $('#es').click(function(){
    $('body').removeClass('en');
  });
});

请注意，您不是选择：after伪元素然后更改动画，而是选择元素本身并附加和删除其他类（分别为esText＃和enText＃）。

OnClick更改CSS内容

2 个答案: