Start CSS-Transition with JavaScript - javascript

I read 5 tutorials about how to start a CSS-Transition with JavaScript, but it doesn't work.
I'm using Safari.
Here's my Code:
<html>
<head>
<title>Test</title>
<style type="text/css">
#test{
width: 100px;
height: 100px;
background-color: aqua;
transition: width 3s linear;
}
</style>
<script type="text/javascript">
function test(){
document.getElementById('test').style.width = 200+'px';
}
</script>
</head>
<body>
<div id="test">
</div>
<button onclick="test()">Los</button>
</body>
</html>

You may need to use vendor prefixes, safari uses webkit so try addind the -webkit- prefix.
<style type="text/css">
#test{
width: 100px;
height: 100px;
background-color: aqua;
-webkit-transition: width 3s linear;
-moz-transition: width 3s linear;
transition: width 3s linear;
}
</style>
DEMO

Related

css popup screen animation not working

I am trying to create a popup screen that triggers from clicking a button that utilizes an ActionListener inside Javascript. The animation is basically a horizontal line that expands left to right, once the horizontal line reaches its full length it will expand upwards and downwards to create a popup box. I tried using css webkit animations which are called by javascript but it seems to only make the vertical animation and then the horizontal line vanishes as well as completely ignoring the vertical expansion.
init();
function init(){
document.getElementById("Btn").addEventListener("click",function(){
document.getElementById("popup-animation").style.visibility = "visible";
document.getElementById("popup-animation").style.WebkitAnimation =
"popup-horizontal-line 3s, popup-vertical-expansion 2s 3s";
});
}
body{
background-color: black;
}
#popup-animation{
width: 0;
height: 2px;
position: absolute;
left: 30%;
top: 30%;
visibility: hidden;
background-color: white;
color: white;
}
#-webkit-keyframes popup-horizontal-line{
0%{
width: 0;
}
100%{
width: 40%;
}
}
#-webkit-keyframes popup-vertical-expansion{
0%{
height: 0;
}
100%{
height: 40%;
}
}
<!DOCTYPE html>
<html>
<head>
<title>CSS Popup Animation</title>
<head>
<link rel="stylesheet" type="text/css" href="test.css">
</head>
</head>
<body>
<button id="Btn">Click</button>
<div id = popup-animation>content</div>
<script type="text/javascript" src="test.js"></script>
</body>
</html>
You need to add animation-fill-mode of forwards to both of those animations
Here's one that works in all browsers, using classes rather than "inline" style :p
init();
function init(){
document.getElementById("Btn").addEventListener("click",function(){
document.getElementById("popup-animation").style.visibility = "visible";
document.getElementById("popup-animation").classList.add('doanim');
});
}
#popup-animation{
width: 0;
height: 2px;
position: absolute;
left: 30%;
top: 30%;
background-color: red;
color: white;
}
.doanim {
animation: popup-horizontal-line 3s, popup-vertical-expansion 2s 3s;
animation-fill-mode: forwards, forwards;
}
#keyframes popup-horizontal-line{
0%{
width: 0;
}
100%{
width: 40%;
}
}
#keyframes popup-vertical-expansion{
0%{
height: 2px;
}
100%{
height: 40px;
}
}
<button id="Btn">Click</button>
<div id = popup-animation>content</div>
You need to add the "forwards" keyword in order for the element to keep the styles reached at the end of the animation
Also, get rid of the browser prefix, it's totally unnecessary. And you might want to add an overflow:hidden to the popup, so the content doesn't show while drawing the horizontal line.
init();
function init(){
document.getElementById("Btn").addEventListener("click",function(){
document.getElementById("popup-animation").style.visibility = "visible";
document.getElementById("popup-animation").style.animation =
"popup-horizontal-line 3s forwards, popup-vertical-expansion 2s 3s forwards";
});
}
body{
background-color: black;
}
#popup-animation{
width: 0;
height: 2px;
position: absolute;
left: 30%;
top: 30%;
visibility: hidden;
background-color: white;
color: black;
overflow:hidden;
}
#keyframes popup-horizontal-line{
0%{
width: 0;
}
100%{
width: 40%;
}
}
#keyframes popup-vertical-expansion{
0%{
height: 0;
}
100%{
height: 40%;
}
}
<html>
<head>
<title>CSS Popup Animation</title>
<head>
<link rel="stylesheet" type="text/css" href="test.css">
</head>
</head>
<body>
<button id="Btn">Click</button>
<div id ="popup-animation">content</div>
<script type="text/javascript" src="test.js"></script>
</body>
</html>

why this angularjs animation does not work?

The animation doesn't work. I could not fint what I am wrong.
Here is the code.
HTML
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular-animate.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular-aria.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular-messages.js"></script>
<script src="js.js"></script>
<link rel="stylesheet" type="text/css" href="css.css">
</head>
<body>
<div ng-app="myApp" ng-controller="AppCtrl">
<div ng-hide="hidden == true" ng-animate="'slide'">
<h1>Come and get it!</h1>
</div>
<div ng-hide="hidden == false" ng-animate="'slide'">
<h1>Fine.</h1>
</div>
<div>
<button ng-click="hidden=true">I don't want it</button>
<button ng-click="hidden=false">I want it</button>
</div>
</div>
</body>
</html>
CSS
.slide-container {
height: 100px;
position: relative;
}
.slide-container > * {
display:block;
width:100%;
top:0;
left:0;
right:0;
bottom:0;
padding:10px;
}
.slide-hide, .slide-show {
-webkit-transition: 300ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
-moz-transition: 300ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
-ms-transition: 300ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
-o-transition: 300ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
transition: 300ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
position: absolute;
}
.slide-hide {
background: red;
display: none;
}
.slide-hide.slide-hide-active {
background: red;
display: none;
}
.slide-show {
background: red;
position: relative;
left: 100px;
}
.slide-show.slide-show-active {
background: red;
position: relative;
left: 0px;
}
JS
angular.module('myApp', [])
.controller('AppCtrl', function ($scope) {
$scope.hidden = false;
});
I got this code from http://jsfiddle.net/elthrasher/Uz2Dk/. In the fiddle, It works perfectly, but once I moved the code in my editor, I doesn't work! I just want to get the function that when a button is clicked, the contents are changed with an animation. For example, left flying animation.

CSS3: Lines of text sliding into page at different times

I have the code shown below that slides text into the page from right to left using css3 animation. I am using a different animation-delay for each line, but I have the problem that before the animation starts the lines are already visible on the left, and I don't want that.
Are there any meansa) to keep the text lines invisible before animation starts or
b) a simple way to load the lines at different times (maybe using javascript setTimeout?) or other tricks?
(note: I am using Firefox 35.0.1)
Help would be much appreciated!
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
animation-name: slidein;
animation-duration: 2s;
animation-timing-function: ease-in-out;
color: red;
font-size: 3.5em;
font-family: Arial;
font-weight:bold;
}
#keyframes slidein {
0% { margin-left: 100%; }
100% { margin-left: 0%; }
}
</style>
</head>
<body>
<h1 style="animation-delay: 0s;">ONE</h1>
<h1 style="animation-delay: 1s;">TWO</h1>
<h1 style="animation-delay: 3s;">THREE</h1>
</body>
</html>
You may simply set an higher value to margin-left, for example "101%", and texts disappear.
Anyway I suggest you tu replace margin-left with CSS translation, according to this link, for better performance. In this last case, due to particular behaviour of CSS transformation (explained here) you also don't need overflow:hidden on Body tag in order to avoid horizontal scrollbars.
#keyframes slidein {
0% { transform: translate(101%); }
100% { transform: translate(0%); }
}
Or, if you don't want to set a "strange" more than 100% value, you could combine my solution, with #Herrington Darkholme's one.
Just add opacity: 0; to the initial element and opacity: 1; to the animation.
However, you need to retain the opacity after the animation ends. So the animation-fill-mode: forwards; comes to help.
Update: using transform: translate(100%); thanks to #Luca Detomi
Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/animation-fill-mode
<!DOCTYPE html>
<html>
<script src="http://leaverou.github.com/prefixfree/prefixfree.min.js"></script>
<head>
<style>
h1 {
animation-name: slidein;
animation-duration: 2s;
animation-timing-function: ease-in-out;
animation-fill-mode: forwards;
color: red;
font-size: 3.5em;
font-family: Arial;
font-weight:bold;
opacity: 0;
}
#keyframes slidein {
0% { transform: translate(101%); opacity:1; }
100% { transform: translate(0%); opacity:1;}
}
</style>
</head>
<body>
<h1 style="animation-delay: 0s;">ONE</h1>
<h1 style="animation-delay: 1s;">TWO</h1>
<h1 style="animation-delay: 3s;">THREE</h1>
</body>
</html>
Add margin-left to more than 100%
h1 {
animation-name: slidein;
animation-duration: 5s;
animation-timing-function: ease-in-out;
color: red;
font-size: 3.5em;
font-family: Arial;
font-weight:bold;
margin-left: 105%;
}
#keyframes slidein {
0% { margin-left: 105%; }
100% { margin-left: 0%; }
}
Here is another solution to the same problem:
We start with witdh:0px and overflow:hidden; (invisible) and end width:300px.
<!DOCTYPE html>
<html>
<script src="http://leaverou.github.com/prefixfree/prefixfree.min.js"></script>
<head>
<style>
h1 {
animation-name: slidein;
animation-duration: 2s;
animation-timing-function: ease-in-out;
animation-fill-mode: forwards;
color: red;
font-size: 3.5em;
font-family: Arial;
font-weight:bold;
width:0px;
overflow:hidden;
}
#keyframes slidein {
0% { margin-left: 100%; width:300px; }
100% { margin-left: 0%; width:300px;}
}
</style>
</head>
<body>
<h1 style="animation-delay: 0s;">ONE</h1>
<h1 style="animation-delay: 1s;">TWO</h1>
<h1 style="animation-delay: 2s;">THREE</h1>
</body>
</html>

Appended div couldn't scroll

In google chrome I append a div. When I click the button the red div will slide out but it can't scroll with mouse wheel.
The bug only happens in google chrome.
This is an example page:http://infinitynewtab.com/question/test.html
html, css and js:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
body{
margin: 0px;
overflow: hidden;
}
#right{
width:350px;
height:100%;
position: absolute;
top:0px;
right:-350px;
background-color: red;
overflow-y:scroll;
}
#button{
width:180px;
height:40px;
padding: 5px;
background-color:rgb(75, 197, 142);
margin-top: 200px;
margin-left: auto;
margin-right: auto;
color:#fdfdfd;
border-radius: 10px;
cursor: pointer;
}
#-webkit-keyframes slideOut{
0% {
transform:translate(0px);
-webkit-transform:translate(0px);
}
100% {
transform:translate(-350px);
-webkit-transform:translate(-350px);
}
}
.slideOut{
animation:slideOut ease 0.3s;
-webkit-animation:slideOut ease 0.3s;
transform:translate(-350px);
-webkit-transform:translate(-350px);
}
</style>
</head>
<body>
<div id="button">Click me,then scroll in the red area</div>
<script src="jquery2.1.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var str='';
for (var i = 0; i <10000; i++) {
str+=i+'<br>';
};
$('body').append('<div id="right">'+str+'</div>');
});
$("#button").on('click',function(event) {
/* Act on the event */
$('#right').addClass('slideOut');
});
</script>
</body>
</html>
You cat try it may be it's help
CSS add z index as like this
#right{
z-index:2;
}
#button{
z-index:1;
}
Live Demo
The problem is with the slideOut class. Not sure why. But this works:
.slideOut{
-webkit-transition: all .3s ease-in;
-moz-transition: all .3s ease-in;
-ms-transition: all .3s ease-in;
transition: all .3s ease-in;
right: 0 !important;
}
If you want the page to scroll don't set the div's height to 100%.
The way you implemented this you can scroll only after focusing the div. this is not a bug...

how to prevent horizontal scroll on css zoom animation

I want to use a landscape image, that zooms in to the landmark in the center and stays there.
I have one main issue with the current code I have..
That is the horizontal bar that turns up on zoom.
I want the image to have 100% width but the height to be about 80%
HTML:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<link type="text/css" rel="stylesheet" href="css/animate.css">
<link type="text/css" rel="stylesheet" href="css/home1.css">
</head>
<body>
<div id="wrapper">
<a href="#">
<img src="images/zoom.jpg" alt="">
</a>
</div><!--wrapper-->
</body>
</html>
CSS :
a {
overflow:hidden;
width:100%;
}
a img {
text-decoration: none;
display: block;
width: 100%;
float: left;
margin: 0 3px 3px 0;
opacity: 1;
-webkit-transform: scale(1,1);
-webkit-transition-timing-function: ease-out;
-webkit-transition-duration: 250ms;
-moz-transform: scale(1,1);
-moz-transition-timing-function: ease-out;
-moz-transition-duration: 250ms;
}
a img:hover {
opacity: .7;
-webkit-transform: scale(2.05,2.07);
-webkit-transition-timing-function: ease-out;
-webkit-transition-duration: 250ms;
-moz-transform: scale(2.05,2.07);
-moz-transition-timing-function: ease-out;
-moz-transition-duration: 250ms;
position: relative;
z-index: 99;
}
I am also wondering if there is a way I can make it stay on zoomed in state once the hover is done, so that another element can appear at that point but the zoom is closer.
http://jsfiddle.net/itsnamitashetty/U4HTu/
Add display:block; to a css. It'll solve your issue.
Demo: http://jsfiddle.net/lotusgodkk/U4HTu/1/
a {
overflow:hidden;
width:100%;
display:block;
}

Categories