CSS transition for transform property without rotation - javascript

I need to transform an element with rotation, I want to animate (with transition) the transform but not the rotation.
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<style>
.transF{
transform:translate3d(150px, 100px, 0px) rotateZ(-50deg);
transition : transform 3s linear;
}
</style>
<script>
var add = function(){
$("#test").addClass("transF");
}
var remove = function(){
$("#test").removeClass("transF");
}
</script>
</head>
<body>
<button onclick="add()">Add</button>
<button onclick="remove()">Remove</button>
<div id="test">test</div>
</body>
</html>
Plunkr link

I don't think you can transition a specific property - use animation instead:
animate the translate3d
preserve the rotateZ value while the animation is happening
See demo below:
var add = function() {
$("#test").addClass("transF");
}
var remove = function() {
$("#test").removeClass("transF");
}
.transF {
transform: translate3d(150px, 100px, 0px) rotateZ(-50deg);
animation: translate 3s linear;
}
#keyframes translate {
from {
transform: translate3d(0px, 0px, 0px) rotateZ(-50deg);
}
to {
transform: translate3d(150px, 100px, 0px) rotateZ(-50deg);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<button onclick="add()">Add</button>
<button onclick="remove()">Remove</button>
<div id="test">test</div>

You can change the to this one.
<style>
.transF
{
transform:translate3d(150px, 100px, 0px);
transition : transform 3s linear;
}
</style>
Just remove the rotateZ(-50deg).
Thank you.

Related

Playing CSS animation on button click won't work

I'm trying to call a CSS animation on the event that this button is pressed, after doing some research it seems classList is the way forward. It's late and I think I'm being stupid but I cannot get it to work.
HTML:
<body>
<img id="myID" class="mouse" src="mouse.png" onclick="ani()">
<script src="script.js"></script>
</body>
<head>
<link href="styles.css" rel="stylesheet"/>
</head>
JavaScript:
function ani()
{
document.getElementById('myID').classList.add = 'animate';
}
CSS:
.animate
{
animation: test 1s linear forwards;
}
#keyframes test
{
100%
{
transform: translateX(calc(8%));
}
}
add is a function so the way you are using classList needs a slight change from:
document.getElementById('myID').classList.add = 'animate';
to:
document.getElementById('myID').classList.add('animate');
function ani(){
document.getElementById('myID').classList.add('animate');
}
.animate {
animation: test 1s linear forwards;
}
#keyframes test {
100% {
transform: translateX(calc(8%));
}
}
<body>
<img id="myID" class="mouse" src="https://stock.wikimini.org/w/images/d/d4/Mickey_Mouse.png" onclick="ani()">
</body>

Rotating Icons using JavaScript not working properly

<html>
<head>
<link rel="stylesheet" type="text/css" href="doll.css">
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="../project/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="../project/style.css" />
<link rel="stylesheet" type="text/css" href="../project/font-awesome-4.2.0/css/font-awesome.min.css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script>
$(".rotation_90deg").click(function(){
$(this).toggleClass("down") ;
});
</script>
</head>
<body>
<div class="fa fa-anchor rotation_90deg"></div>
</body>
</html>
associated CSS:
.rotation_90deg{
-moz-transition: all 2s linear;
-webkit-transition: all 2s linear;
transition: all 2s linear;
}
.rotation_90deg.down{
-moz-transform:rotate(90deg);
-webkit-transform:rotate(180deg);
transform:rotate(180deg);
}
I am trying to rotate an icon using this code but it's not working, would someone be able to provide a solution or parallel code?
You need to move the code within document ready handler or move the script tag at the end of the HTML to run only after elements are loaded.
<script>
$(document).ready(function() {
$(".rotation_90deg").click(function() {
$(this).toggleClass("down");
});
});
</script>
.rotation_90deg {
-moz-transition: all 2s linear;
-webkit-transition: all 2s linear;
transition: all 2s linear;
}
.rotation_90deg.down {
-moz-transform: rotate(90deg);
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$(".rotation_90deg").click(function() {
$(this).toggleClass("down");
});
});
</script>
<a href="#">
<div style="margin-top:200px" class="fa fa-anchor rotation_90deg">11</div>
</a>
.rotation_90deg {
-moz-transition: all 2s linear;
-webkit-transition: all 2s linear;
transition: all 2s linear;
}
.rotation_90deg.down {
-moz-transform: rotate(90deg);
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#">
<div style="margin-top:200px" class="fa fa-anchor rotation_90deg">11</div>
</a>
<script>
$(".rotation_90deg").click(function() {
$(this).toggleClass("down");
});
</script>
In case elements are dynamically added then you should use event delegation to listen to the click event of the element.
<script>
$(document).ready(function() {
$('body').on('click', '".rotation_90deg", unction() {
$(this).toggleClass("down");
});
});
</script>

when I click twice css3 transform is not working

I want the square rotation when I click the start button.but:
when I click once ,it is working. when I run twice ,this css3 effect is not working.
$(function(){
var $obj=$(".red");
$("#btnStart").on("click",function(){
$obj.removeClass("run").addClass("run");
});
});
body{padding:100px;}
.red{background:#f00;width:100px;height: 100px;}
.run{
transform:rotate(3600deg);
transition: transform 5s ease 0s;
-moz-transition:transform 5s ease 0s;
-webkit-transition:transform 5s ease 0s;
-o-transition:transform 5s ease 0s;
}
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
<div class="red"></div>
<br/>
<button id="btnStart">
开始旋转
</button>
</body>
</html>
You need to have a timeout in between removing and adding the class. Otherwise it won't recognize the change.
$(function(){
var $obj=$(".red");
$("#btnStart").on("click",function(){
$obj.removeClass("run");
setTimeout(function(){
$obj.addClass("run");
}, 10);
});
});
body{padding:100px;}
.red{background:#f00;width:100px;height: 100px;}
.run{
transform:rotate(3600deg);
transition: transform 5s ease 0s;
-moz-transition:transform 5s ease 0s;
-webkit-transition:transform 5s ease 0s;
-o-transition:transform 5s ease 0s;
}
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
<div class="red"></div><br/>
<button id="btnStart">
开始旋转
</button>
</body>
</html>
Instead of add/remove class, you can use animate() function of jQuery !
$(function(){
var $obj=$(".red");
$("#btnStart").click(function(){
$('.red').animate({ borderSpacing: -3600 }, {
step: function(now,fx) {
$(this).css('-webkit-transform','rotate('+now+'deg)');
$(this).css('-moz-transform','rotate('+now+'deg)');
$(this).css('transform','rotate('+now+'deg)');
},
duration:'slow'
},'linear');
});
});
body{padding:100px;}
.red{background:#f00;width:100px;height: 100px;}
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
<div class="red"></div>
<br/>
<button id="btnStart">
开始旋转
</button>
</body>
</html>

Triggering CSS animation with JavaScript

I have this html
<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="StyleSheet.css" rel="stylesheet" />
<link href="animation.css" rel="stylesheet" />
<meta charset="utf-8" />
</head>
<body>
<div class="box box-anim-start box-anim-end"></div>
<script src="jquery-2.1.4.min.js"></script>
<script src="JavaScript.js"></script>
</body>
</html>
As you can see there are two stylesheets linked to this page.
StyleSheet code
.box {
height: 100px;
width: 100px;
background-color: red;
}
animation code
.box-anim-start {
}
.box-anim-end {
transition-property: transform;
transition-duration: 2s;
transition-delay: 5s;
}
And here's the JavaScript code
var box = $(".box").eq(0);
var sheet = document.styleSheets[1];
var rules = sheet.cssRules || sheet.rules;
var rule0 = rules[0];
rule0.style.transform = "translateX(100px)";
var rule1 = rules[1];
rule1.style.transform = "translateX(0px)";
What I wanted was an animation upon opening this page. And, since the delay is mentioned in css, i thought that would work. But it didn't. Could you explain why?
It's makes a lot more sense to define your CSS animation in your CSS using keyframes, you can then call it in by adding a class to your box once the page has loaded.
So initially remove the .box-anim-start class
<div class="box"></div>
Then define the animation using keyframes:
#keyframes slide {
0%{
transform: translate(0, 0)
}
100% {
transform: translate(100px, 0)
}
}
Then call the animation within .box-anim-start
.box-anim-start {
animation: slide ease-in 2s;
animation-delay: 2s;
}
.box{
transition: 2s ease-in;
}
And finally add the class once the page has loaded using jQuery
$(document).ready(function){
$('.box').addClass('.box-anim-start');
});
The best way is to use the stylesheet.
In Chrome, for instance, your line:
var rules = sheet.cssRules || sheet.rules;
is wrong because rules is null. This happens because you need to change the index to
var sheet = document.styleSheets[0]; // instead of 1 in my case
But consider to put a delay between the two transition.
Instead, if you want simply use the js with your styles you can do:
$(function () {
$('div.box').css('transform', 'translateX(100px)').delay(3000).queue(function (next) {
$(this).css('transform', 'translateX(0px)');
next();
});
});
.box {
height: 100px;
width: 100px;
background-color: red;
}
.box-anim-start {
}
.box-anim-end {
transition-property: transform;
transition-duration: 1s;
transition-delay: 2s;
}
<script src="http://code.jquery.com/jquery-1.11.3.js"></script>
<div class="box box-anim-start box-anim-end"></div>

Cursor with typed javascript library skips to new line and doesnt 'type' out works

<!DOCTYPE html>
<html>
<style >
.typed-cursor{
opacity: 1;
-webkit-animation: blink 0.7s infinite;
-moz-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; }
}
</style>
<head>
<script src="jquery-2.1.4.js"></script>
<script type="text/javascript" src="typed.js"></script>
</head>
<body>
<div class = element>
<script>
$(function(){
$(".element").typed({
strings: ["First sentence.", "Second sentence."],
typeSpeed: 0,
loop: true,
cursorChar: "$",
});
});
</script>
</div>
</body>
</html>
When I run the page, the cursor skips to the next line and the words come up infinitly. I would like the cursor to stick with the words, going back and forth. A demo on the creators home page shows how I would like the cursor to be (http://www.mattboldt.com/demos/typed-js/). I'm not sure what I'm missing, I'm guessing its small though
display: inline;
Tried setting the display to both inline and inline-block as suggested on lots of sites.. but this solves my issue... use above code in CSS....
you can check demo:
http://www.problogbooster.com/
You are missing quotes around the element class. Try this instead:
change
<div class = element>
to
<div class = "element">
EDIT
Actually, you should be using a <span> element, not a <div>.

Categories