We Keep Coding

Animate text element by adding a class and animate it back to initial color by removing the class

If I don't want to give my element the color class for some reason (I just give it a class name to be able to select it but I want to have color classes not attached to the element)
How can I toggle between colors? I mean animate color from blue to red and animate again from red to blue...
Here is an ugly solution I have here, but I think there should be a better and cleaner way maybe using pure CSS like toggle a class, and when class is attached element is blue if it removes the element animates back to red...
const text = document.querySelector(".myClass");
text.addEventListener("click", function (){
if(text.classList.contains("changeBlue")){
text.classList.add("changeRed");
text.classList.remove("changeBlue");
} else if(text.classList.contains("changeRed")){
text.classList.add("changeBlue");
text.classList.remove("changeRed");
} else {
text.classList.add("changeRed");
}
})
#keyframes changeRedAnime {
from {color: blue}
to {color: red}
}
.changeRed {
animation-name: changeRedAnime;
animation-duration: .5s;
animation-fill-mode: forwards;
}
#keyframes changeBlueAnime {
from {color: red}
to {color: blue}
}
.changeBlue {
animation-name: changeBlueAnime;
animation-duration: .5s;
animation-fill-mode: forwards;
}
.myClass {
user-select:none;
color:blue;
cursor:pointer;
}
<div class="myClass">This is a sample text.</div>

One alternative is to store css class names in array and use some index-access-increment-modulo magic
Example
const text = document.querySelector(".myClass");
const classList = text.classList;
const values = ["changeBlue", "changeRed"]
let it = 0;
text.addEventListener("click", function () {
classList.remove(values[it++ % 2]);
classList.add(values[it % 2]);
})
#keyframes changeRedAnime {
from {color: blue}
to {color: red}
}
.changeRed {
animation-name: changeRedAnime;
animation-duration: .5s;
animation-fill-mode: forwards;
}
#keyframes changeBlueAnime {
from {color: red}
to {color: blue}
}
.changeBlue {
animation-name: changeBlueAnime;
animation-duration: .5s;
animation-fill-mode: forwards;
}
.myClass {
user-select:none;
color:blue;
cursor:pointer;
}
<div class="myClass">This is a sample text.</div>

There is good JS in answer of #Józef Podlecki, but I'd like to improve your CSS as well. You don't need such massive constructions with animation. transition: color .5s linear; will be enough.
Or you can set some default color class from the beginning and then just toggle classes.
const text = document.querySelector(".myClass");
text.addEventListener("click", function (){
text.classList.toggle("red");
text.classList.toggle("blue");
})
.myClass {
user-select:none;
cursor:pointer;
transition: color .5s linear;
}
.red {
color: red;
}
.blue {
color: blue;
}
<div class="myClass blue">This is a sample text.</div>

How to Dynamically change animation-name in CSS

I am trying to change the animation-name in (loader--text: after) CSS with the help of js Or Jquery but I am only able to change (content) in CSS not able to change animation-name
I have tried:
code:
$('.loader--text').attr("data-content", "Connection Printer"); // It's Working
$('.loader--text').attr("data-animation", "connecting-text"); // But It's Not working
.loader--text:after {
content: attr(data-content);
font-weight: bold;
animation-name: attr(data-animation);
animation-duration: 3s;
animation-iteration-count: infinite;
}
#keyframes connecting-text {
0% {
content: "Connecting Printer";
}
25% {
content: "Connecting Printer.";
}
50% {
content: "Connecting Printer..";
}
75% {
content: "Connecting Printer...";
}
}
#keyframes fetching-text {
0% {
content: "Fetching Story";
}
25% {
content: "Fetching Story.";
}
50% {
content: "Fetching Story..";
}
75% {
content: "Fetching Story...";
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='loader--text'></div>

after some research you can only change the content styling with attr method.
you can take a different approach to the task like turning the :after animation to only the dots and use innerHTML for the dom itself.
exmple:
const loader = document.querySelector(".loader--text");
loader.innerHTML = "Connecting Printer";
function changeText() {
loader.innerHTML = "Fetching Story";
}
.loader--text {
cursor: pointer;
}
.loader--text:after {
content: "";
font-weight: bold;
animation-name: dots;
animation-duration: 3s;
animation-iteration-count: infinite;
}
#keyframes dots {
0% {
content: "";
}
25% {
content: ".";
}
50% {
content: "..";
}
75% {
content: "...";
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='loader--text' onclick="changeText()"></div>

you can use attr() in css to pass only string values. animation-name is not a string value
more info : https://css-tricks.com/css-attr-function-got-nothin-custom-properties/
you can change the animation by changing the style.animationName property of the element.
let state = 1;
const square = document.getElementById('square')
document.getElementById('test').addEventListener("click", ()=>{
if(state == 1){
square.style.animationName = "second"
state = 2
} else{
square.style.animationName = "first"
state = 1
}
})
#square{
background: red;
padding: 50px;
width:50px;
height:50px;
/* animation-name: attr(data-animate); */
animation-name: first;
position:absolute;
animation-duration: 2s;
animation-iteration-count: infinite;
}
#keyframes first {
0% {
left: 0
}
100% {
left: 600px;
}
}
#keyframes second {
0% {
top: 0
}
100% {
top: 600px;
}
}
<div id="square" data-animate="first">
</div>
<button id="test">TOGGLE</button>

You can only use attr() for the content attribute in this case.
I'd advise to get rid of jQuery (no hate, I used to love using it), but since you're already using it, you can switch animation name like this:
$('div').css('animation-name', 'anim2');
This of course doesn't apply for pseudo elements (such as :after).
Anyway I think it's much easier to create two separated classes (each one of them applies a different animation) and then just toggle the classes, I think it's much easier to use.
.loader--text.one:after{animation: ...}
.loader--text.two:after{animation: ...}
$('.loader--text').removeClass('one').addClass('two');

How to change background when using typed.js?

I am using typed.js from the link http://www.mattboldt.com/demos/typed-js/. Its working very nicely. Now I want to change my body background every time when a sentence completed.
I mean when "abcd ef" comes background should be blue.
for "ghijkl" ---the background should be red
and so on.
How can I do this. Please share with me if any one has any idea. I am adding my code below.
<div id="typed-strings">
<p><span>abcd ef.</span></p>
<p><span>ghijkl.</span></p>
<p><span>mnopqr.</span></p>
<p><span>stuvwxyz.</span></p>
</div>
<span id="typed" class=""></span>
<script src="/assets/typed.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$("#typed").typed({
// strings: ["Typed.js is a <strong>jQuery</strong> plugin.", "It <em>types</em> out sentences.", "And then deletes them.", "Try it out!"],
stringsElement: $('#typed-strings'),
typeSpeed: 60,
backDelay: 800,
loop: true,
contentType: 'html', // or text
// defaults to false for infinite loop
loopCount: false,
callback: function(){ foo(); },
resetCallback: function() { newTyped(); }
});
$(".reset").click(function(){
$("#typed").typed('reset');
});
});
function newTyped(){ console.log("Call");/* A new typed object */ }
function foo(){ console.log("Callback"); }
</script>
<style type="text/css">
/* code for animated blinking cursor */
.typed-cursor{
opacity: 1;
font-weight: 100;
font-size: 36px;
-webkit-animation: blink 0.7s infinite;
-moz-animation: blink 0.7s infinite;
-ms-animation: blink 0.7s infinite;
-o-animation: blink 0.7s infinite;
animation: blink 0.7s infinite;
}
#-keyframes blink{
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
}
#-webkit-keyframes blink{
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
}
#-moz-keyframes blink{
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
}
#-ms-keyframes blink{
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
}
#-o-keyframes blink{
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
}
</style>

here what you need:
after
loopCount: false,
insert this line
preStringTyped: function() { alert('background change happens now'); },
p.s. just change alert to your function. So, that will trigger when each sentence starts.

Time for setting the background-color !
As simple as
$(".element").typed({
strings: ["First sentence.<style>body{background-color: yellow}</style>Second sentence.<style>body{background-color: red}</style>"],
typeSpeed: 1,
contentType: "html"
});

Got the solution:
$(function(){
var x=1;
$("#typed").typed({
// strings: ["Typed.js is a <strong>jQuery</strong> plugin.", "It <em>types</em> out sentences.", "And then deletes them.", "Try it out!"],
stringsElement: $('#typed-strings'),
typeSpeed: 100,
backDelay: 1000,
loop: true,
contentType: 'html', // or text
// defaults to false for infinite loop
loopCount: false,
/*preStringTyped: function() { myfunc(); },*/
callback: function(){ foo(); },
preStringTyped: function() {
console.log(x);
x++;
if(x == 5) {
x = 1;
}
if(x == 1){
$("#start").addClass("myimg4").removeClass("myimg1 myimg2 myimg3");
}
if(x == 2){
$("#start").addClass("myimg1").removeClass("myimg2 myimg3 myimg4");
}
if(x == 3){
$("#start").addClass("myimg2").removeClass("myimg1 myimg3 myimg4");
}
if(x == 4){
$("#start").addClass("myimg3").removeClass("myimg1 myimg2 myimg4");
}
myfunc(); },
resetCallback: function() { newTyped(); }
});
$(".reset").click(function(){
$("#typed").typed('reset');
});
});
css
.myimg1 {
background-image: url('../assets/home/bg_1.jpg');
-webkit-transition: background-image 0.8s ease-in-out;
transition: background-image 0.8s ease-in-out;
}
.myimg2 {
background-image: url('../assets/home/bg_2.jpg');
-webkit-transition: background-image 0.8s ease-in-out;
transition: background-image 0.8s ease-in-out;
}
.myimg3 {
background-image: url('../assets/home/bg_3.jpg');
-webkit-transition: background-image 0.8s ease-in-out;
transition: background-image 0.8s ease-in-out;
}
.myimg4 {
background-image: url('../assets/home/bg_4.jpg');
-webkit-transition: background-image 0.8s ease-in-out;
transition: background-image 0.8s ease-in-out;
}

Fading effect in CSS not working when the div closes

When i click on the toggle button and it hides the div, it closes abruptly without the fading animation. What am I going wrong?
I would like to hide the div with a fading effect too. What is being missed?
CSS:
#-webkit-keyframes fadeIn { from { opacity:0; opacity: 1\9; /* IE9 only */ } to { opacity:1; } }
#-moz-keyframes fadeIn { from { opacity:0; opacity: 1\9; /* IE9 only */ } to { opacity:1; } }
#keyframes fadeIn { from { opacity:0; opacity: 1\9; /* IE9 only */ } to { opacity:1; } }
.fade-in {
opacity:0; /* make things invisible upon start */
-webkit-animation:fadeIn ease-in 1; /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
-moz-animation:fadeIn ease-in 1;
animation:fadeIn ease-in 1;
-webkit-animation-fill-mode:forwards; /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
-moz-animation-fill-mode:forwards;
animation-fill-mode:forwards;
-webkit-animation-duration:1s;
-moz-animation-duration:1s;
animation-duration:1s;
}
.fade-in.one {
-webkit-animation-delay: 0.2s;
-moz-animation-delay: 0.2s;
animation-delay: 0.2s;
}
The HTML:
<a onclick="toggle_visibility('foo');">Toggle Foo</a>
<div id="foo" style="display:none;" class="fade-in one">
Here I am toggling the display text
</div>
Javascript:
<script type="text/javascript">
<!--
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'none')
e.style.display = 'block';
else
e.style.display = 'none';
}
//-->
</script>

If you want to have additional adjustments, let me know.
function toggle(id) {
var e = document.getElementById(id);
e.style.display = "block";
setTimeout(function(){ e.classList.toggle('visible') }, 1);
}
function transition(id){
var el = document.createElement("temp");
var transitions = {
'transition':'transitionend'
}
for(t in transitions){
if( el.style[t] !== undefined ){
return transitions[t];
}
}
}
document.getElementById("foo").addEventListener(transition("foo"), function() {
if(!this.classList.contains("visible")) {
this.style.display='none';
}
});
#foo.visible {
opacity: 1;
}
#foo {
opacity: 0;
-webkit-transition: opacity 2s;
transition: opacity 2s;
}
<a onclick="toggle('foo')" class="toggle">Toggle Foo</a>
<div id="foo">
Here I am toggling the display text
</div>

Hide a div following css animation on button click

As the current time, I have CSS3 Animations being triggered on button click, and all works well. Its an animation to represent the plant life cycle, working in 5 stages, each stage shows an image and corresponding text.
However, if i click stage 1, then stage 2, and want to click stage 1 again to view the supporting text again, whilst hiding the image from stage two, I cannot seem to be able to do it.
JSFiddle for your convinience:
http://jsfiddle.net/YUC3d/
Live View of current stage:
http://www.mattmeadows.info/MFTW2/howplantsgrow.html
Javascript:
$(function() {
$("#stage1").click(function() {
$("#Seed1,#infoBox1").toggleClass("animate")
});
$("#stage2").click(function() {
$("#Seed2,#infoBox2").toggleClass("animate")
});
$("#stage3").click(function() {
$("#Seed3,#infoBox3").toggleClass("animate")
});
$("#stage4").click(function() {
$("#Seed4,#infoBox4").toggleClass("animate")
});
$("#stage5").click(function() {
$("#Seed5,#infoBox5").toggleClass("animate")
});
});
HTML Segment being animated:
<div id="Seed1" class="target">
</div> <!-- end of Seed1 -->
<div id="infoBox1">
Text for stage 1 Text for stage 1 Text for stage 1 Text for stage 1 Text for stage 1
</div>
(There are 5 of these div combinations in total
CSS:
#-webkit-keyframes show
{
0% { opacity: 0; }
100% { opacity: 1; }
}
#Seed1
{
opacity:0;
}
#Seed1.animate
{
-webkit-animation-name: show;
-webkit-animation-duration: 2s;
-webkit-animation-timing-function: ease;
-webkit-animation-iteration-count: 1;
-webkit-animation-direction: normal;
-webkit-animation-delay: 0;
-webkit-animation-play-state: running;
-webkit-animation-fill-mode: forwards;
}
#infoBox1
{
width: 400px;
height: 100px;
background:white;
position: absolute;
bottom: 425px;
margin-left: 25px;
border-radius: 10px;
opacity:0;
}
#infoBox1.animate
{
-webkit-animation-name: show;
-webkit-animation-duration: 2s;
-webkit-animation-timing-function: ease;
-webkit-animation-iteration-count: 1;
-webkit-animation-direction: normal;
-webkit-animation-delay: 0;
-webkit-animation-play-state: running;
-webkit-animation-fill-mode: forwards;
}

Presuming that 'animate' is the 'on' class (it seems to be), try making a method that resets everything then animate the specific element:
function setStage(stage) {
var numberOfStages = 5;
for (i=1; i <= numberOfStages; i++) {
if (i == stage) {
$("#infoBox" + i).addClass("animate");
$("#Seed" + i).addClass("animate");
} else if (i < stage) {
$("#infoBox" + i).removeClass("animate");
$("#Seed" + i).addClass("animate");
} else {
$("#infoBox" + i).removeClass("animate");
$("#Seed" + i).removeClass("animate");
}
}
}
Example use:
$(document).ready(function() {
$("#stage1").click(function() {
setStage(1);
});
//stage 2,3,5 etc...
$("#stage4").click(function() {
setStage(4);
});
});

Presuming that 'animate' is the 'on' class (it seems to be), try making a method that resets everything then animate the specific element:
function resetState() {
//you can use classes here to make it neater
$("#Seed1,#infoBox1,#Seed2,#infoBox2,#Seed3,#infoBox3,#Seed4,#infoBox4,#Seed5,#infoBox5").removeClass("animate");
}
Example use:
$("#stage1").click(function() {
resetState();
$("#Seed1,#infoBox1").toggleClass("animate");
});