We Keep Coding

Set transition for specific property in javascript doesn't work

I am using transition(0.3s) in CSS when hover some texts for changing the color, but I also used transition in Javascript for "translate" the text. My problem now is that, when I hover them, they don't use anymore the transition in CSS (0.3s) but what I set in javascript. I tried using element.style.transition = "translate 5.4s ease" or in css I set delay for specific property but in vain.How can i set the transition in Js only for translate? Thank you in advance
CSS
social-media-texts p {
position:relative;
color:white;
font-size:20px;
transition: opacity 0.3s;
transform: translate(-300%);
opacity: 0;
}
JavaScript
socialTexts.forEach((element) => {
element.style.opacity = "1";
element.style.transform = "translate(0)";
element.style.transition = 1.1 * countP + "s";
countP += 0.3;
});

It is because you are overwriting the previous transition property. You would need to expand it by adding a comma followed by your new transition (eg. transform 1.1s)
That would result in the following property: transition: opacity 0.3s, transform: 1.1s;
See section Change Several Property Values: https://www.w3schools.com/css/css3_transitions.asp

Dynamically set css transform before transition

I am trying to simulate a mouse animation. I would like to dynamically set the position, then move it with a css transition. So far I am able to get a program that moves the mouse. However, I am having trouble setting the initial position dynamically with javascript. My code looks like this:
Here is the CSS
.cursorDiv {
width: 30px;
height: 30px;
transform: translate(0px,0px);
transition: 2s ease;
}
.cursorDivMoved {
transform: translate(100px,200px);
}
Here is the javascript:
var cursorDiv = document.createElement("img");
cursorDiv.className = "cursorDiv";
cursorDiv.src="https://cdn2.iconfinder.com/data/icons/windows-8-metro- style/512/cursor.png";
document.body.appendChild(cursorDiv);
setTimeout(function() {
$(".cursorDiv").toggleClass("cursorDivMoved");
}, 1000);
//cursorDiv.style.transform="translate(100px,50px)";
When I run this it works fine. However, when I try to change the initial position with javascript (uncomment last line), then the transition doesn't occur anymore.
Here is a Demo:
https://jsfiddle.net/fmt1rbsy/5/

If you programmatically set the style.transform property directly on your element (which you need if you want to move it to an arbitrary position through JS), it will override any transform specified in classes. Hence adding "cursorDivMoved" class later on does not transform (translate / move) it.
You have to continue moving it by specifying its style.transform property, or simply remove it: cursorDiv.style.transform = null
Demo: https://jsfiddle.net/fmt1rbsy/9/
You may also want to have the very first translate being transitioned. In that case, you have to wait for the browser to make an initial layout with your element at its start position, otherwise it will see no transition (it will see it directly after the transform is applied, i.e. at its final position). You can either:
Use a small (but non zero) setTimeout to give some time for the browser to do its initial layout.
Force a browser layout by trying to access some property that require the browser to compute the page layout (e.g. document.body.offsetWidth).
Use 2 nested requestAnimationFrame's before applying your transform.
Demo: https://jsfiddle.net/fmt1rbsy/8/

Is this what you are looking for? Tell me if it can be improved. Open your console and change the class name to cursorDivMoved.
var cursorDiv = document.createElement("img");
cursorDiv.className = "cursorDiv";
cursorDiv.id = 'cursorDiv';
cursorDiv.src = "https://cdn2.iconfinder.com/data/icons/windows-8-metro-style/512/cursor.png";
document.body.appendChild(cursorDiv);
#cursorDiv {
width:30px;
height:30px;
-o-transition: 2s ease;
-moz-transition: 2s ease;
-webkit-transition: 2s ease;
-ms-transition: 2s ease;
transition: 2s ease;
}
.cursorDivMoved {
-o-transform:translate(100px, 200px);
-moz-transform:translate(100px, 200px);
-webkit-transform:translate(100px, 200px);
-ms-transform:translate(100px, 200px);
transform:translate(100px, 200px);
}

You can define initial postion (x,y), and then when user click the position will increase and set to the 'cursorDiv', such as:
var cursorDiv = document.createElement("img");
cursorDiv.className = "cursorDiv";
cursorDiv.src="https://cdn2.iconfinder.com/data/icons/windows-8-metro-style/512/cursor.png";
document.body.appendChild(cursorDiv);
var x = 100, y = 50;
setTimeout(function() {
cursorDiv.style.transform="translate(100px,50px)";
}, 1000);
$(document).click(function () {
x+= 20;
y += 50;
var str = "translate(" + x + "px," + y + "px)";
cursorDiv.style.transform=str;
});
Here is Demo

jQuery equivalent for css selector progress::-webkit-progress-value

I need to adjust the transition time for a HTML5 <progress>-Bar with JS (jQuery) but I cannot find the right selector in jQuery doing this.
My current tries:
CSS:
progress::-webkit-progress-value {
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-o-transition: all 0.5s;
-ms-transition: all 0.5s;
transition: all 0.5s; /* Works like a charm */
}
JavaScript (with no success):
// These lines do nothing when the progress value changes:
$(".progressSelectorClass[progress-value]").css({"-webkit-transition" : "all 6s"});
$(".progressSelectorClass > *").css({"-webkit-transition" : "all 6s"});
$(".progressSelectorClass").css({"-webkit-transition" : "all 6s"});
// This gets an error:
$(".progressSelectorClass::-webkit-progress-value").css({"-webkit-transition" : "all 6s"});
Is there any chance to select the progress::-webkit-progress-value in JavaScript (with or without jQuery)?
In this jsFiddle you will see more clearly what I try to do:
http://jsfiddle.net/rD5Mc/1/
Update:
I got the effect with an ugly workaround by adding/change a data-animation-time parameter to the <progress>-element and created several css-classes like this:
progress[data-animation-time="5"]::-webkit-progress-value { -webkit-transition: all 5s; }
progress[data-animation-time="10"]::-webkit-progress-value { -webkit-transition: all 10s; }
progress[data-animation-time="15"]::-webkit-progress-value { -webkit-transition: all 15s; }
progress[data-animation-time="20"]::-webkit-progress-value { -webkit-transition: all 20s; }
progress[data-animation-time="25"]::-webkit-progress-value { -webkit-transition: all 25s; }
...
It works, but I'm very unhappy with my solution. There must be a better way...

You can use the javascript to modify the css rules!
var rule;
$(".animationtimeFirst").change(function() {
time = $(this).val();
// Write out out full CSS selector + declaration
s = '.progressselector::-webkit-progress-value { -webkit-transition: all ' + time + 's; }';
// Check the rules
// If there's no rules,
if ((!rule && rule !== 0) || !document.styleSheets[0].cssRules.length) {
// Make one! -- Insert our CSS string into the page stylesheet
rule = document.styleSheets[0].insertRule(s, 0);
// I think this code is different in IE, beware!
console.log('Our rule is #' + rule);
} else {
// If we already have a rule we can change the style we've implement for the psuedo class
document.styleSheets[0].rules[rule].style.webkitTransitionDuration = time.toString() + 's';
}
});
Here's an updated fiddle: http://jsfiddle.net/trolleymusic/MHYY8/3/ -- hope it helps :)

progress::-webkit-progress-value is not a DOM-Element (it's part of the Shadow DOM, though). So you cannot acccess it with jQuery or any DOM method.
It all comes down to a workaround like yours.
EDIT:
It turns out that in recent versions of Chrome you actually can access the Shadow DOM with the webkitShadowRoot property. Unfortunately it does not work for the <progress /> element.

Smoothly change css

my situation is as follows:
I have the following function
var showHideMemberContent = function(){
if(isHidden === false){
$("#showHideMemberContent").text("Member Content");
$("#main").css("height","-=187");
$('#mainBottom').hide('slow', function() {
isHidden = true;
});
} else {
$("#showHideMemberContent").text("Verberg");
$("#main").css("height","+=187");
$('#mainBottom').show('slow', function() {
isHidden = false;
});
}
};
So when the function executes it hides the "mainBottom" div. The "main" div should decrease/increase its height.
It does so, but I need to know if there is a way to do this smoothly.
Thanks in regard.

You can use CSS to achieve this. Simply add this rule to your CSS declaration for #main:
#main {
-khtml-transition: height 0.3s ease;
-moz-transition: height 0.3s ease;
-ms-transition: height 0.3s ease;
-o-transition: height 0.3s ease;
-webkit-transition: height 0.3s ease;
transition: height 0.3s ease;
}
Here the height part defines the property to apply the transition to, the 0.3s defines the time it takes to transition from one state to another, and the ease property defines the function for the transition. Ease will slowly accelerate to 50% transition and then decelerate to 100%.
The advantage of using CSS over jQuery's animate function is that the CSS transform is hardware accelerated when supported, and will be smoother and more efficient. The disadvantage is that some antiquated browser versions will not support the effect, however it will simply fall back to a non-animated height change, rather than breaking.
To learn more about CSS transitions, follow the link below to Mozilla's article. They're a great reference for these sort of things and an excellent place to start learning, or even brush up on your knowledge. I've also included an example of this technique below.
MDN article on transitions.
Here is a jsfiddle example.

Yes, use jquerys animate() method, http://api.jquery.com/animate/.
Include jquery ui if you want to use easing types other than "linear" or "swing". Its passed as a second argument (string), to the animate method. https://jqueryui.com/easing/
Example (with jquery ui loaded):
$(selector).animate({ height: '200px' }, 'easeInOutCubic', function(){
/* animation comlete */
});
Also, work on your accept rate.

You can use animate for that:
var oldHeight = $("#main").height();
$("#main").animate({'height', oldHeight + 187}, { duration: 500, queue: false });

if you want to operate with css and classes, not the style attribute, you can use jquery-ui's switchClass() or toggleClass() methods http://docs.jquery.com/UI/Effects/switchClass http://jqueryui.com/demos/toggleClass/

Use animate()...
var showHideMemberContent = function(){
if(isHidden === false){
$("#showHideMemberContent").text("Member Content");
$("#main").animate({height:-=187}, 300);
$('#mainBottom').hide('slow', function() {
isHidden = true;
});
} else {
$("#showHideMemberContent").text("Verberg");
$("#main").animate({height:+=187}, 300);
$('#mainBottom').show('slow', function() {
isHidden = false;
});
}
};

jquery animate .css

I have a script:
$('#hfont1').hover(
function() {
$(this).css({"color":"#efbe5c","font-size":"52pt"}); //mouseover
},
function() {
$(this).css({"color":"#e8a010","font-size":"48pt"}); // mouseout
}
);
how can i animate it or slow it down, so it wont be instant ?

Just use .animate() instead of .css() (with a duration if you want), like this:
$('#hfont1').hover(function() {
$(this).animate({"color":"#efbe5c","font-size":"52pt"}, 1000);
}, function() {
$(this).animate({"color":"#e8a010","font-size":"48pt"}, 1000);
});
You can test it here. Note though, you need either the jQuery color plugin, or jQuery UI included to animate the color. In the above, the duration is 1000ms, you can change it, or just leave it off for the default 400ms duration.

You could opt for a pure CSS solution:
#hfont1 {
transition: color 1s ease-in-out;
-moz-transition: color 1s ease-in-out; /* FF 4 */
-webkit-transition: color 1s ease-in-out; /* Safari & Chrome */
-o-transition: color 1s ease-in-out; /* Opera */
}

The example from jQuery's website animates size AND font but you could easily modify it to fit your needs
$("#go").click(function(){
$("#block").animate({
width: "70%",
opacity: 0.4,
marginLeft: "0.6in",
fontSize: "3em",
borderWidth: "10px"
}, 1500 );
http://api.jquery.com/animate/

You can actually still use ".css" and apply css transitions to the div being affected. So continue using ".css" and add the below styles to your stylesheet for "#hfont1". Since ".css" allows for a lot more properties than ".animate", this is always my preferred method.
#hfont1 {
-webkit-transition: width 0.4s;
transition: width 0.4s;
}

If you are needing to use CSS with the jQuery .animate() function, you can use set the duration.
$("#my_image").css({
'left':'1000px',
6000, ''
});
We have the duration property set to 6000.
This will set the time in thousandth of seconds: 6 seconds.
After the duration our next property "easing" changes how our CSS happens.
We have our positioning set to absolute.
There are two default ones to the absolute function: 'linear' and 'swing'.
In this example I am using linear.
It allows for it to use a even pace.
The other 'swing' allows for a exponential speed increase.
There are a bunch of really cool properties to use with animate like bounce, etc.
$(document).ready(function(){
$("#my_image").css({
'height': '100px',
'width':'100px',
'background-color':'#0000EE',
'position':'absolute'
});// property than value
$("#my_image").animate({
'left':'1000px'
},6000, 'linear', function(){
alert("Done Animating");
});
});