Hello folks at Stack Overflow from all over the world! hope you´re all doing great! I just have one inquiry today. I just found out about an awesome css3 library called animate.css http://daneden.github.io/animate.css/ which I am trying to implement with jquery mobile to custome my apps page transitions. I'm trying to go from one page to another with an animate.css class applied to the page div but after the fancy transition occured the page remains on same page and does not reach the targeted page. If anyone out there has any clue on how to achieve this, please let me know. Thanks Here the code:
CSS:
<link href="./css/animate.css" rel="stylesheet" />
Javascript:
<script language="javascript">
$(function() {
$("a#home").click(function() {
animate(".box-a", 'rotateOutDownRight');
return false;
});
});
function animate(element_ID, animation) {
$(element_ID).addClass(animation);
var wait = window.setTimeout( function(){
$(element_ID).removeClass(animation)}, 1300
);
}
</script>
HTML:
<!------- HOME PAGE ---------------------------------------->
<div data-role="page" id="home" data-theme="c" class="box-a animated"> <!--Inicia pagina home -->
<div data-role="header"><h1>Animate</h1></div>
<div data-role="content">
<p><a id="home" href="#pagina2">Box A will flash, click here!</a></p>
<a id="home" href="#pagina2" data-role="button">PAGE 2 W/ANIMATION.CSS</a>
PAGE 2 W/O ANIMATION.CSS
</div> <!-- End of div content -->
<div data-role="footer" data-position="fixed"><h3>Animate</h3></div>
</div>
<!----- PAGE 2 ----------------------->
<div data-role="page" id="pagina2" data-theme="c"> <!--Inicia pagina home -->
<div data-role="header"><h1>Animate</h1></div>
<div data-role="content">
<p>PAGE 2</p>
</div> <!-- End of div content -->
<div data-role="footer" data-position="fixed"><h3>Animate</h3></div>
</div>
URL: see an example here: http://apps.alfonsopolanco.com
jQM allows you to define custom transition ( http://demos.jquerymobile.com/1.2.0/docs/pages/page-customtransitions.html ). Using animate.css for this is no problem.
Add 2 css rules that reference the desired transition from animate.css:
.customRotate.in {
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-webkit-animation-name: rotateInUpRight;
-moz-animation-name: rotateInUpRight;
}
.customRotate.out {
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-webkit-animation-name: rotateOutDownRight;
-moz-animation-name: rotateOutDownRight;
}
Then simply set the data-transition attribute on the anchor tag to the name of your new transition:
<a id="home" href="#pagina2" data-role="button" data-transition="customRotate">PAGE 2 W/ANIMATION.CSS</a>
Here is a DEMO
UPDATE: To control the speed of the transition:
.in {
-webkit-animation-timing-function: ease-out;
-webkit-animation-duration: 750ms;
-moz-animation-timing-function: ease-out;
-moz-animation-duration: 750ms;
}
.out {
-webkit-animation-timing-function: ease-in;
-webkit-animation-duration: 555ms;
-moz-animation-timing-function: ease-in;
-moz-animation-duration: 555;
}
Related
Here is my code. http://jsfiddle.net/anastsiacrs/Lt7aP/1639/
[Please, run example in jsfiddle, stackoverflow's code does not run]
function XController($scope) {
$scope.model={isHidden:true};
}
.open-div{
background-color:red;
//height:260px;
}
.hidden-div{
background-color:green;
//height:60px;
}
.transformable {
-webkit-transition: 3000ms linear;
-moz-transition: 3000ms linear;
-o-transition: 3000ms linear;
-ms-transition: 3000ms linear;
transition: 3000ms linear;
}
<script src="https://code.angularjs.org/1.4.8/angular.js"></script>
<div ng-app ng-controller="XController">
<div ng-class="{'hidden-div' : model.isHidden, 'open-div' : !model.isHidden}" class="transformable">
<input type="button" ng-click="model.isHidden=!model.isHidden" ng-show="model.isHidden" value="Open"/>
<input type="button" ng-click="model.isHidden=!model.isHidden" ng-hide="model.isHidden" value="Close"/>
<p>{{isHidden}} </p>
<div ng-hide="model.isHidden" >
<div>Hello XXX</div>
<p> Some content will be here </p>
<p> Some content will be here </p>
<p> Some content will be here </p>
<p> Some content will be here </p>
<p> Some content will be here </p>
</div>
</div>
</div>
As you can see, without explicit height animation doesn't apply for this property. What is the possible way to solve this issue. May be there are some library or link, that will help me.
If height is directly setted to element, there is another one issue wiht div content. It is apper before div is fully expanded.
some tips will be very pleased
Have you tried changing the CSSheight to min-height? If the hidden div is bigger than the minimum height it will still expand. Should solve your issue.
Bootstrap collapse.js can be used here.
http://v4-alpha.getbootstrap.com/components/collapse/
I'm using the fullPage.js script and so far I implemented the mechanism that invokes css animations while reaching one of the "slides", the code looks like this:
img{
-webkit-transition: all 1.2s ease-in-out;
-moz-transition: all 1.2s ease-in-out;
-o-transition: all 1.2s ease-in-out;
transition: all 1.2s ease-in-out;
}
#image-one{
z-index: 0;
}
#image-one.active{
-webkit-transform: translate3d(200px, 0px, 0px);
-moz-transform: translate3d(200px, 0px, 0px);
-ms-transform:translate3d(200px, 0px, 0px);
transform: translate3d(200px, 0px, 0px);
}
and later on in the javascript I have:
$(document).ready(function () {
$('#fullpage').fullpage({
'verticalCentered': false,
'responsive': 900,
'css3': false,
'anchors': ['one', 'two', 'three', 'four'],
'navigation': true,
'navigationPosition': 'right',
'navigationTooltips': ['one', 'two', 'three', 'four'],
'menu': '#menu',
'scrollingSpeed': 1000,
'scrollOverflow': 'true',
'afterLoad': function (anchorLink, index) {
if (index == 3) {
$('#image-one').addClass('active');
}
}
});
});
Ok, so now, after reaching slide no. 3 I'll have the animation of this element:
<img src="img/a.png" alt="a" id="image-one" />
And that works fine. However, on slide number 3 I put the plugin liquidSlider, which looks exactly like on the default settings on that webpage. And on each tab I wanted to put element that animates when user turns on that correct tab. The html code for it looks like this:
<div class="liquid-slider" id="slider-1">
<div>
<div id="images">
<img src="img/a.png" alt="a" id="image-one" />
</div>
<div class="sometext">
<h2 class="title">title1</h2><p>this image is animated when user sees it because this tab is active when user scrolls down the page</p>
</div>
</div>
<div>
<div id="images">
<img src="img/b.png" alt="a" id="image-two" />
</div>
<div class="sometext">
<h2 class="title">title2</h2><p>how can I animate this picture when user displays that tab?</p>
</div>
</div>
<div>
<div id="images">
<img src="img/c.png" alt="a" id="image-three" />
</div>
<div class="sometext">
<h2 class="title">title3</h2><p>and how can I animate this picture when user displays that tab?</p>
</div>
</div>
</div>
So how should I modify my script/create the new one to animate each element when the user selects the tab it's displayed on? Thanks, guys for help!
From what I noticed, the problem is the animations are applied to all the slides at once when you hit Slide 3. You could do a simple trick (maybe a work around) to make the animation trigger again and again when you leave or enter a tab.
If you also take a look into their Animate.css page they are doing the similar thing. Remove the class 'animated' and adding it again to animate the next slide as well. You could also do this by adding it into the transition function of your slider.
(note: Transition function needs a 'this.transition();' or it just hangs there.)
I would say something like this would do the trick
$('.liquid-slider').liquidSlider({
pretransition: function() {
$('#image-one').removeClass('active');
$('#image-two').removeClass('active');
$('#image-three').removeClass('active');
$('#image-one').addClass('active');
$('#image-two').addClass('active');
$('#image-three').addClass('active');
this.transition();
}
});
Haven't tested the code myself. So give it a try.
I'm trying to mock a refresh for a list that I have. So when a user clicks refresh, the list fades in to let users know a new GET request was made.
html
<div ng-controller="ModalDemoCtrl">
<ul ng-repeat="friend in friends" class="animated" ng-class="{fadeIn: refresh === true}">
<li>{{friend}}</li>
</ul>
<button ng-click="refresh=!refresh"> Fade me in every time </button>
</div>
css
.animated {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
#-webkit-keyframes fadeIn {
0% {opacity: 0;}
100% {opacity: 1;}
}
#keyframes fadeIn {
0% {opacity: 0;}
100% {opacity: 1;}
}
.fadeIn {
-webkit-animation-name: fadeIn;
animation-name: fadeIn;
}
and of course the js
angular.module('plunker', ['ui.bootstrap']);
var ModalDemoCtrl = function ($scope, $modal, $log) {
$scope.friends = ['andy', 'randy', 'bambi'] ;
};
Here's a working plnkr: http://plnkr.co/edit/R0Gv2T?p=info
My issue is the way I have it, the user has to click twice to fade in the list in after clicking it once because the variable refresh has to be set back to false before being set back to true. Is there anywhere through pure css to accomplish this? I've tried setting scope variables in the controller and calling on click function but I'm just confused at this point. I'm open to any solution
For one, I'd check out angular-motion as it has all of these kinds of css animations. If not though you should hook into the ngAnimate module as it provides a great way to handle this sort of stuff using ng-hide/ng-show. So your css becomes
.fadeIn {
opacity: 0;
}
.fadeIn.ng-hide-remove {
-webkit-animation-name: fadeIn;
animation-name: fadeIn;
}
and your html becomes
<ul ng-repeat="friend in friends" class="animated" ng-show="refresh">
<li>{{friend}}</li>
</ul>
You may also want to provide a fadeOut animation as well and apply it using css rule .fadeIn.ng-hide
I used #PLS timeout idea but kept the ng-class and added a variable that checks if it's on or off. Then always set it to false when you click before waiting for the timeout.
$scope.friends = [{name:'andy'}, {name:'randy'}, {name:'bambi'}] ;
$scope.refresh = function(){
$scope.fadeCheck = true;
$timeout(function(){
$scope.fadeCheck = false;
}, 300);
}
and the html
<ul ng-repeat="friend in friends" class="animated" ng-class="{fadeIn: fadeCheck === false}">
<li>{{friend.name}}</li>
</ul>
http://plnkr.co/edit/Xp7E6s?p=preview
$('#demo').on('hidden', function () {
$('#divbody').removeClass('span4').addClass('span8');
});
When the button is clicked: the demo div collapses vertically (i.e. width = 0) which works fine. But I want to then increase the divbody div to fill the page i.e. span8. The JS code is there but I want to do it animation like when the demo div collapses.
Hopefully this should help you get an idea, I did not have a whole lot to go off of on your fiddle. But this should get you started.
jQuery
$('#hideBtn').click(function(){
$('#divbody').toggleClass('span4');
$('#divbody').toggleClass('span8');
$(this).parent().toggleClass('span2');
$(this).parent().toggleClass('span1');
});
CSS
#divbody {
-webkit-transition: width 0.35s ease;
-moz-transition: width 0.35s ease;
-o-transition: width 0.35s ease;
transition: width 0.35s ease;
}
HTML
<div class="container-fluid">
<div class="row-fluid">
<div class="span2">
<button role="button" id="hideBtn" class="btn-danger" data-toggle="collapse" data-target="#demo"> Hide </button>
<div id="demo" class="collapse in width">
<div style="width: 400px;">
<p> This should collapse vertical (by width)</p>
</div>
</div>
</div>
<div id="divbody" class="span4">
Table comes here. This is the main body. Span should increase from 4 to 8 when div demo is collapsed. test test test test test test test test test test
</div>
</div>
</div>
Example
http://www.bootply.com/90126
Another example with the button below instead of to the side..
http://www.bootply.com/90128
http://stadskoll.nu/restaurang.php
If you press the string of text called Visa/dölj mer information which is in a grey font, you will see that the effect occurring is shaking. This is not intentional and I cant figure out what's wrong.
To clarify, I want to know what's causing this "shaky" effect and be able to remove it.
HTML :
<!--VAL1-->
<div id="val1">
<div id="information">
<namn>
</namn>
<br>
<a id="funktion" onclick="toggle('val1');toggleoff_val1('val1');">visa/dölj mer information</a>
<br>
<div id="star2" style="background-position:0 -0px">
<div id="stars1">
<div class="first" onmouseover="starmove('-32px','stars1')" onmouseout="starnormal('stars1')" onclick="rate('','1');succes()"></div>
<div class="first" onmouseover="starmove('-64px','stars1')" onmouseout="starnormal('stars1')" onclick="rate('','2');succes()"></div>
<div class="first" onmouseover="starmove('-96px','stars1')" onmouseout="starnormal('stars1')" onclick="rate('','3');succes()"></div>
<div class="first" onmouseover="starmove('-128px','stars1')" onmouseout="starnormal('stars1')" onclick="rate('','4');succes()"></div>
<div class="first" onmouseover="starmove('-160px','stars1')" onmouseout="starnormal('stars1')" onclick="rate('','5');succes()"></div>
</div>
</div>
<div id="txt"></div>
<br>
<br>
<information></information>
</div>
<div id="bilder">
<img src="" />
<br/>
<img src="http://stadskoll.nu/bilder/karta.jpg" />
</div>
</div>
CSS :
#val1 {
width:83%;
height:75px;
border-top:1px;
border-top-style:groove;
margin-left:40px;
overflow:hidden;
padding-top:10px;
padding-left:20px;
-webkit-transition: all 0.5s ease-in-out;
transition: height 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out; /* Firefox 4 */
-o-transition: all 0.5s ease-in-out; /* Opera */
}
JavaScript :
<script>
function toggle(id) {
var e = document.getElementById(id);
if(e.style.height == '175px')
e.style.height = '75px';
else
e.style.height = '175px';
}
</script>
The issue appears to be with the display:inline on the maincontentbox.
If you add vertical-align:top it will disappear.
What I believe is happening is that, since by default it is aligned to the baseline, the browser is making the div taller. Since the div is taller it has to resize the parent container and then move the div to the bottom of the line.