-WEBKIT-TRANSITION for display styles - javascript

I have a code (simplified). I want "height linear 2s" transition. Is there way to do that using display:block and display:none property? I don't want to specify height of content.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<script type="text/javascript">
const classes = new Array("shown", "hidden");
const classesCount = 2;
var curClass = 0;
function switchClass() {
document.getElementById("divel").className=classes[curClass = (curClass + 1) % classesCount];
}
</script>
<style type="text/css">
.hidden {
display:none;
-webkit-transition-property: height;
-webkit-transition-duration: 2s;
-webkit-transition-timing-function: linear;
}
.shown {
display:block;
-webkit-transition-property: height;
-webkit-transition-duration: 2s;
-webkit-transition-timing-function: linear;
}
</style>
</head>
<body>
<button onclick="switchClass()">Press me</button>
<div id="divel" class="shown">
Hello World<br>
Hello World<br>
Hello World<br>
</div>
</body>
</html>

basic example: http://jsfiddle.net/DNeEv/
You need to specify an exact height, however. Not sure how to do it with height:auto
An example with auto height: http://jsfiddle.net/nB5Du/

There are the cases that the transition will fail:
display: none
height: auto
..So I need to change the css to make the transition works. Here is the demo: http://jsbin.com/axijaz/4
However, height:auto + max-height + min-height can reproduce similar effect:
http://jsbin.com/axijaz/8/edit
Note:
if min-max have big different, you may need to break down the transition (see point 2)
min-height only or max-height only will trigger only one side of transition (see version 6 and 7)
Or if you are willing to use a wrapper and js code, someone already give a solution here
Hope it can help.

Related

how to resize responsive image up and down

Anyone know how to resize an image up and down on click.
Example: nrk.no
The website you give as an example uses CSS Transitions to make some of their images grow and shrink. You can learn more about CSS Transitions at https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions
Below is a simple example using JQuery. When you click on the Google logo it will grow and when you click on it again it will shrink.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>
.box img {
transition: width .4s,margin .4s,max-width .4s;
transition-property: width, margin, max-width;
transition-duration: 0.4s, 0.4s, 0.4s;
transition-timing-function: ease, ease, ease;
transition-delay: 0s, 0s, 0s;
}
.box img.clicked{
width: 500px;
}
</style>
<script>
$(function(){
$('.box img').on('click', function() {
$(this).toggleClass('clicked');
});
});
</script>
</head>
<body>
<div class="box">
<img src="https://www.google.com/images/srpr/logo11w.png" width="100" />
</div>
</body>
</html>

JS FadeIn not working in Firefox and IE

I have been trying to get a fading background image script to work, but I am pretty noob at JS. The problem is that the fade effect works nicely in chrome, but the picture just shifts without a fade in Firefox and IE.
Here is my code:
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
</head>
<body style="margin:0; padding:0;">
<style>
.bg_img_slider{
min-height:530px;
background-image:url("a.jpg");
background-repeat:no-repeat;
background-position:center;
background-size:cover;}
</style>
<script>
var newBg = [
'b.jpg',
'c.jpg',
'd.jpg'
];
var i = 0;
var rotateBg = setInterval(function(){
i++;
if(i > 2)
i=0;
$('.bg_img_slider').css({backgroundImage : 'url(' + newBg[i] + ')'}).fadeIn('slow', 1);
}, 3000);
</script>
<div class="bg_img_slider"></div>
</body>
</html>
Instead of using the jquery method fadeIn() you can use CSS3 transitions.
JSFIDDLE DEMO
.bg_img_slider {
min-height:530px;
background-image:url("http://texy.dk/a.jpg");
background-repeat:no-repeat;
background-position:center;
background-size:cover;
-webkit-transition: background-image .6s ease-in;
transition: background-image .6s ease-in;
}

Execute AngularJS animation using class, ng-show and ng-class

I'm quite new to Angular, so I'm affraid you will need to point in me right direction.
I'm trying to execute a CSS animation using AngularJS.
If you look at the original code, a CSS animation can be executed quite easily, see this plunker:
http://plnkr.co/edit/MCY3FOV7qLk7YfyzJfob?p=preview
But, the problem is that this is working through the css class property: sample-show-hide
Let's see the following HTML:
<body ng-app="ngAnimate">
<div ng-init="checked=true">
<label>
<input type="checkbox" ng-model="checked" style="float:left; margin- right:10px;"> Is Visible...
</label>
<div class="check-element" ng-class="{'sample-show-hide': }" ng-show="checked" style="clear:both;">
Visible...
</div>
</div>
</body>
But now, I want the class for the animation to set through the ng-class directive, but unfortunately, the animation doesn't work anymore then.
Please have a look at this plunker: http://plnkr.co/edit/MCY3FOV7qLk7YfyzJfob?p=preview
I invested some time and I think I atleast partially solved your problems:
First things first, your plnkr links both link to the same plnkr and the same version, this isn't very helpfull as I couldn't really see the difference.
Additionally the latest version in your plnkr had some mistakes (e.g. not injecting ngAnimate into your angular app).
The main reason why your animation didn't work was actually your CSS code.
You should read up on how it works here.
I took a working CSS from this stackoverflow answer and used it in your code.
My code is now looking like this:
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Example - example-example3-production</title>
<script data-require="angular.js#*" data-semver="1.4.0-beta.2" src="https://code.angularjs.org/1.4.0-beta.2/angular.js"></script>
<link href="animations.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="controller.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.0-beta.1/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.0-beta.1/angular-animate.js"></script>
</head>
<body ng-app="OfficeUI" ng-controller="OfficeUIController as OficeUI">
<div>
<label>
<input type="checkbox" style="float:left; margin-right:10px;" ng-click="isActive()"/>
Is Visible...
</label>
<div class="sample-show-hide" ng-class="'reveal-animation'" ng-show="trigger" style="clear:both;">
Visible...
</div>
</div>
</body>
</html>
controller.js :
var OfficeUI = angular.module('OfficeUI', ['ngAnimate']);
// Defines the AngularJS 'OfficeUI' controller.
OfficeUI.controller('OfficeUIController', ['$scope', function($scope) {
$scope.isActive = function(){
$scope.trigger = !$scope.trigger;
console.log($scope.trigger);
};
$scope.trigger = false;
}]);
animation.css :
body { font-family: 'Segoe UI'; color: #444; }
.sample-show-hide{
padding:10px;
border:1px solid black;
background-color:white;
}
.reveal-animation.ng-hide.ng-hide-add-active {
display: block !important;
}
.reveal-animation.ng-hide-remove {
-webkit-animation: enter_sequence 1s linear; /* Safari/Chrome */
animation: enter_sequence 1s linear; /* IE10+ and Future Browsers */
}
.reveal-animation.ng-hide-add {
-webkit-animation: leave_sequence 1s linear; /* Safari/Chrome */
animation: leave_sequence 1s linear; /* IE10+ and Future Browsers */
}
#-webkit-keyframes enter_sequence {
0% { opacity:0; }
100% { opacity:1; }
}
#keyframes enter_sequence {
0% { opacity:0; }
100% { opacity:1; }
}
#-webkit-keyframes leave_sequence {
0% { opacity:1; }
100% { opacity:0; }
}
#keyframes leave_sequence {
0% { opacity:1; }
100% { opacity:0; }
}
I forked (twice by accident :D ) your plnkr here.

Image width:auto and max-height after changing parent block height

Please see example in chrome. I try to implement row height animation with image that shouldn't exceed parent block.
Why does image width change only after changing any property example?
Try to click the first button, image height will updated, but width no. Then click the second button, opacity will changed, and image width will be setted properly.
<!DOCTYPE html>
<html>
<head>
<title>Image resizing</title>
<style>
.header-row {
width:900px;
height:90px;
margin:0 auto;
background:#0f3a51;
-webkit-transition: all .9s ease;
-moz-transition: all .9s ease;
-ms-transition: all .9s ease;
-o-transition: all .9s ease;
transition: all .9s ease;
}
.header-row img {
display: inline;
max-height: 100%;
background:#ff9900;
}
.header-row-reduced {
height:50px;
}
</style>
</head>
<body>
<div id="hr" class="header-row">
<img id="img" src="http://upload.wikimedia.org/wikipedia/commons/thumb/1/1a/Volkswagen_Logo.png/600px-Volkswagen_Logo.png" alt="">
</div>
<button id="btn" onclick="check();">Update row height</button>
<button id="btn" onclick="changeProp();">Toggle opacity</button>
<script>
var el = document.getElementById('hr'),
img = document.getElementById('img');
function check(){
var classes = el.className.split(' '),
hasClass = classes.indexOf('header-row-reduced');
if(~hasClass) {
classes.splice(hasClass,1);
} else {
classes.push('header-row-reduced');
}
el.className = classes.join(' ');
}
function changeProp() {
img.style.opacity = '0.5';
}
</script>
</body>
</html>
Thats a good question. I don't know why this is not working like expected.
But you could fix it by applying the rule with the height to the element as well:
.header-row-reduced, .header-row-reduced img {
height:50px;
}
This works, but I'm sure it is not exactly what you want to have!
Setting max-height in pixels should fix the issue as well.

CSS3 transition with Javascript

i have this Webpage on which with mouse over, the element rotates and goes back to original position on mouseout.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
div
{
width:100px;
height:100px;
background:red;
transition:width 2s;
-moz-transition:width 2s; /* Firefox 4 */
-webkit-transition:width 2s; /* Safari and Chrome */
-o-transition:width 2s; /* Opera */
}
div:hover
{
width:300px;
}
</style>
</head>
<body>
<p><b>Note:</b> This example does not work in Internet Explorer.</p>
<div></div>
<p>Hover over the div element above, to see the transition effect.</p>
</body>
</html>
Now Is it possible to trigger this transition using JavaScript and not the defualt hover function. I tried by creating two different class names but it just dosent work even if i do it by adding delay and changing the class. Is there anyway to do such a transition with Javascript??
I believe all you need to do is fire a change the style of the element you want to modify when particular events happen. Also, I changed the DOCTYPE to use HTML5. Give this a try:
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
div.sample1
{
width:100px;
height:100px;
background:red;
transition:width 2s;
-moz-transition:width 2s; /* Firefox 4 */
-webkit-transition:width 2s; /* Safari and Chrome */
-o-transition:width 2s; /* Opera */
}
div.sample1:hover
{
width:300px;
}
</style>
<script type="text/javascript">
function doStuff(obj,boolStateChange)
{
console.log('test');
if (boolStateChange==true)
{
obj.style.cssText = "width:300px;height:100px;background:green;transition:width 2s;-moz-transition:width 2s;-webkit-transition:width 2s;-o-transition:width 2s;";
}
else
{
obj.style.cssText = "width:100px;height:100px;background:green;transition:width 2s;-moz-transition:width 2s;-webkit-transition:width 2s;-o-transition:width 2s;";
}
}
</script>
</head>
<body>
<p><b>Note:</b> This example does not work in Internet Explorer.</p>
<div class="sample1"></div>
<p>Hover over the div element above, to see the transition effect.</p>
<br/><br/><br/>
<div id="javaHover" style="background-color:green;width:100px;height:100px;" onMouseOver="doStuff(this,true);" onMouseOut="doStuff(this,false);"></div>
<p>Hover over the div element above, to see the Javascript transition effect.</p>
</body>
</html>
You can do this:
document.getElementsByTagName("div")[0].style.width = '300px';
See fiddle.
what do you think about this:
http://jsfiddle.net/scrRe/ ?
Here you go:
http://jsfiddle.net/scrRe/3/
Do not use :hover selector then. Use JavaScript events.
for example:
CSS:
#box
{
background-color: steelblue;
height: 100px;
width: 100px;
transition: height 1s, width 1s;
-moz-transition: height 1s, width 1s;
-webkit-transition: height 1s, width 1s;
-o-transition: height 1s, width 1s;
}
JavaScript:
var element = document . getElementById ( "box" ) ;
element . addEventListener
(
"click",
function ()
{
this . style . width = "200px" ;
}
) ;
element . addEventListener
(
"dblclick",
function ()
{
this . style . height = "200px" ;
}
) ;
http://jsfiddle.net/6gSZD/
You may be able to use CSSAnimation, which is a JavaScript library that allows you to trigger animations with JavaScript while utilizing CSS to do the actual animation.
Here's an example from the documentation (try it):
var element = document.getElementById('some-el'),
transition = new Transition(element),
transform = new Transform(element);
transition.set({
property: 'transform',
'timing-function': 'ease-in',
duration: '2s'
});
transform.rotate(720).scale(2);

Categories

Resources