Force change of text color using TweenMax

Question

Force change of text color using TweenMax

Navigation

#1 by (1 votes)

1

I have some hyperlinks with the CSS color with the property !important , because I need to change its color by default, which gives them another style sheet that I can not / should modify.

.elementos {
  color: #fff !important;
}

And I have an animation with TweenMax that modifies the container of .elementos . To that animation I need to add a property to change the color of the hyperlinks.

var contenedorAnimacion = tl
    .to(cabecera, 1, {backgroundColor: '#fff'})
    .to(caja, 1, {height: 0, autoAlpha: 0});

I need to add the color change. I already tried with:

var contenedorAnimacion = tl
    .to(cabecera, 1, {backgroundColor: '#fff'})
    .to(elementos, 1, {color: '#999'})
    .to(caja, 1, {height: 0, autoAlpha: 0});

But this does not work for me. Is there a way to force the change or have the property !important of CSS ignored?

javascript html css

asked by akko 12.01.2018 в 18:58

source

1 answer

How to make the last "click" on an option that is in a for ()? Problem with VOLLEY accents

score 1 · Answer 1

Have you tried adding the important in the animation by js?

var contenedorAnimacion = tl
    .to(cabecera, 1, {backgroundColor: '#fff !important'})
    .to(elementos, 1, {color: '#999 !important'})
    .to(caja, 1, {height: 0, autoAlpha: 0});

Although good, the truth although the above or not solve your problem, is not the best advice, the best I can recommend is not to use ! important precisely in this case. Since it is a quick solution, it works most cases where there is no time or a better solution, which in your case if there is, in fact to overwrite in CSS a stylesheet that cascades down or already assigned, it is best to use the inheritance, like this:

If you want to overwrite for example, you can use an ancestor :

.ancestro .elementos{
  background: #fff
}

Or an selector even more specific with more ancestors :

.tatarancestro .bizcancestro .ancestro .elementos{
  background: #fff
}

Or nothing prevents using tags or ids

html body #main .ancestro .elementos{
  background: #fff
}

These will have more "force" to overwrite the stylesheet by defects, unless you use ! important erroneously, as you did.

In this way, you can modify them by javascript, since js uses online styles to apply css or animations and these by hierarchy have greater "force" to overwrite.

The other thing is that you control where to put your stylesheet, that is, if there are styles of the same type or selector, but they are below, the latter will have greater "strength", "hierarchy" or "priority". The same applies to external file links, so if you can control which goes first or later, you can choose to put yours later, like this:

<link href="estilos-por-defecto.css" />
<link href="mis-propios-estilos.css" />

I hope you serve, greetings.