So in this fiddle I have a block sliding in from the left after two seconds.
(function (angular) {
'use strict';
angular.module('testApp', [])
.controller('TestCtrl', function ($scope, $timeout) {
$scope.title = "Hello";
$scope.show = false;
$timeout(function () {
$scope.show = true;
}, 2000);
});
})(angular);
I would like to have the block sliding in when the view is rendered and can be seen by the user.
There is already a style that can be applied to get the block sliding in.
.left-inner-nav {
position:absolute;
top:0;
/*left:75px;*/
left: -150px;
width: 150px;
bottom: 0;
background:#2792D9;
-webkit-transition: left 2s ease;
-moz-transition: left 2s ease;
-ms-transition: left 2s ease;
-o-transition: left 2s ease;
transition: left 2s ease;
}
.left-inner-nav-animate {
left: 0;
}
I'm just stuck as to how to do this on view load.
This is what ngAnimate is for.
ngAnimate adds 4 classes, for different ngView states.
<style>
.slide.ng-enter { } /* starting animations for enter */
.slide.ng-enter.ng-enter-active { } /* terminal animations for enter */
.slide.ng-leave { } /* starting animations for leave */
.slide.ng-leave.ng-leave-active { } /* terminal animations for leave */
</style>
Download and include a reference to angular-animate.js. Then, add ngAnimate as a dependency
angular.module('testApp', ['ngAnimate']);
Update
Markup
<div ng-view class="left-inner-nav"></div>
CSS
.left-inner-nav.ng-enter {} /* starting animations for enter */
.left-inner-nav.ng-enter.ng-enter-active {} <style>
.slide.ng-enter { } /* starting animations for enter /
.slide.ng-enter.ng-enter-active { } / terminal animations for enter */
Related
I'm using a bit of jquery to have a Bootstrap 4 navbar fade in when scrolling down past a certain point, by adding and removing a specific class. However, the code I have won't show the navbar if I reload the page having already scrolled down, and when scrolling back up the CSS transition doesn't fade the bar out but simply pops out of view instantly. How can I fix those issues? Would it be better to rely on purely jquery instead of relying on a CSS class? If so, how would that work? Thanks!
JS:
$(window).scroll(function(e) {
if($(window).width() >= 768)
var scroll = $(window).scrollTop();
if (scroll >= 300) {
$('.navbar-home').addClass("navbar-hide");
} else {
$('.navbar-home').removeClass("navbar-hide");
}
});
CSS:
.navbar-home {
opacity: 0;
visibility: hidden;
transition: opacity 0.5s ease-in-out;
-moz-transition: opacity .2s ease-in-out;
-o-transition: opacity .2s ease-in-out;
-webkit-transition: opacity .2s ease-in-out;
}
.navbar-hide {
opacity: 1;
visibility: visible;
}
You also need to call the same code on page load. Change the listener to:
$(window).on("scroll load", function(e) {...})
I certainly hope that you guys can show me where did I go wrong.
So I try to put together ui-router with ng-animate. Routing works like charm. However, ng-animate staggers to kick in. According to all the samples and docs that I've been reading, the ui-view container should be duplicated, but it does not occur. Instead the container's innerHTML is replaced. I also use an external animation library called animate.css
So I put together a plunkr in hope that some of you could help me out.
Here is a plunkr demo
view1:
<section class="view1" >
<h1>VIEW 1</h1>
<a ui-sref="view2">view2</a>
</section>
view2:
<section class="view2" >
<h1>VIEW 2</h1>
<a ui-sref="view1">view1</a>
</section>
styles:
body {
width: 100%;
}
.view-container {
width: 100%;
}
.view-container.ng-enter .view1,
.view-container.ng-enter .view2,
.view-container.ng-leave .view1,
.view-container.ng-leave .view2 {
position: absolute;
left: 30px;
right: 30px;
transition: 0.5s all ease;
-moz-transition: 0.5s all ease;
-webkit-transition: 0.5s all ease;
}
.view-container.ng-enter .view1,
.view-container.ng-enter .view2 {
-webkit-animation: slideInRight 0.5s both ease;
-moz-animation: slideInRight 0.5s both ease;
animation: slideInRight 0.5s both ease;
}
.view-container.ng-leave .view1 .view-container.ng-leave .view2 {
-webkit-animation: slideOutLeft 0.5s both ease;
-moz-animation: slideOutLeft 0.5s both ease;
animation: slideOutLeft 0.5s both ease;
}
.view1,
.view2 {
width: 100%;
height: 300px;
border: 2px solid red;
}
.view2 {
border: 2px solid green;
}
scripts:
'use strict';
var mainModule = angular.module('poc', ['ui.router', 'ngAnimate']);
mainModule.config(["$stateProvider", "$urlRouterProvider",
function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('view1', {
url: '/view1',
templateUrl: 'view1.html',
}).state('view2', {
url: '/view2',
templateUrl: 'view2.html',
});
$urlRouterProvider.otherwise('/view1');
}
]);
mainModule.run(["$rootScope", "$state",
function($rootScope, $state) {
$rootScope.$on('$stateChangeSuccess', function(event, endState, endParams, startState, startParams) {
console.log(endState);
});
$rootScope.$on('$stateChangeError', function(event, endState, endParams, startState, startParams) {
console.warn(startState);
console.warn(endState);
});
}
]);
index.html:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css" />
</head>
<body data-ng-app="poc">
<div ui-view="" class="view-container"></div>
<script src="https://code.angularjs.org/1.4.9/angular.js" data-semver="1.4.9" data-require="angular.js#1.4.9"></script>
<script src="https://code.angularjs.org/1.4.9/angular-animate.js" data-semver="1.4.9" data-require="angular-animate#*"></script>
<script data-require="ui-router#0.2.18" data-semver="0.2.18" src="//cdn.rawgit.com/angular-ui/ui-router/0.2.18/release/angular-ui-router.js"></script>
<script src="script.js"></script>
</body>
</html>
Any help is appreciated.
You need to add some animation definitions for slideInRight and slideOutLeft
Can use animate.css library for those.
For starters I suggest moving the animation selectors to your <ui-view> element
What actually happens is when a transition time is detected....the element will be cloned allowing for 2 in dom at once ... one entering and one leaving. You can see this in the live html in browser dev tools
DEMO
I am trying to an achieve an effect like the one demonstrated here:
http://templateocean.com/stamp/image-bg/1-home-style-one/index.html
The navbar flies in after you scroll to a certain position.
I used this script as a baseline:
//jQuery to collapse the navbar on scroll
$(window).scroll(function() {
if ($(".navbar").offset().top > 50) {
$(".navbar-fixed-top").addClass("top-nav-collapse");
} else {
$(".navbar-fixed-top").removeClass("top-nav-collapse");
}
});
css:
#media(min-width:767px) {
.navbar {
padding: 20px 0;
-webkit-transition: background .5s ease-in-out,padding .5s ease-in-out;
-moz-transition: background .5s ease-in-out,padding .5s ease-in-out;
transition: background .5s ease-in-out,padding .5s ease-in-out;
/* display: none;*/
}
.top-nav-collapse {
padding: 0;
display: block;
}
}
This changes the navbar height. I played around with the 'display:' parameter and it works to an extent; however, the navbar was popping up without the nice slide effect.
I tried to use this script:
https://api.jqueryui.com/slide-effect/
so I changed the original code to:
(window).scroll(function () {
if ($(".navbar").offset().top > 50) {
$("#navbar-top").toggle("slide");
} else {
$("#navbar-top").toggle("slide");
}
});
Now, however, I am getting the following error:
Uncaught TypeError: Failed to execute 'scroll' on 'Window': 2
arguments required, but only 1 present.custom.js:22 (anonymous
function)
What I am doing wrong? Do I have to really use JS for the slide effect? Can I use some other CSS attributes to achieve the same effect?
Make sure that you load jquery before the other js scripts.
This is my html:
<html>
<head></head>
<body>
<form role="form" ng-if="on" ng-animate="{enter: 'animate-enter', leave: 'animate-leave'}">
...stuff...
</form>
</body>
</html>
This is my model:
$scope.on = false;
//attaching this function to the window so i can call it from the console
window.switchOn = function() {
$scope.$apply(function() {
$scope.on = !$scope.on
});
}
This is my CSS:
.animate-enter {
-webkit-transition: 1s linear all; /* Chrome */
transition: 1s linear all;
opacity: 0;
}
.animate-enter.animate-enter-active {
opacity: 1;
}
I've also added the ngAnimate inclusion to my app controller:
angular.module('app', [..., 'ngAnimate'])...
The purpose of this is to toggle the form from the console. According to the ngAnimate docs, the form should animate into appearance (I'm using Chrome). But it isn't. I've included the angular-animate file. I can see it in the loaded sources. What am i doing wrong?
Step One: Make sure you are including the ng-animate module. Here are the steps from the docs:
Animations are not available unless you include the ngAnimate module as a dependency within your application.
First include angular-animate.js in your HTML:
<script src="angular.js">
<script src="angular-animate.js">
You can download this file from the following places:
Google CDN
//ajax.googleapis.com/ajax/libs/angularjs/X.Y.Z/angular-animate.js
Bower
bower install angular-animate#X.Y.Z
code.angularjs.org
//code.angularjs.org/X.Y.Z/angular-animate.js"
where X.Y.Z is the AngularJS version you are running.
Then load the module in your application by adding it as a dependent module:
angular.module('app', ['ngAnimate']);
With that you're ready to get started!
Step Two:
Your CSS needs to have a .ng-enter class:
.reveal-animation.ng-enter {
-webkit-animation: enter_sequence 1s linear; /* Safari/Chrome */
animation: enter_sequence 1s linear; /* IE10+ and Future Browsers */
}
#-webkit-keyframes enter_sequence {
from { opacity:0; }
to { opacity:1; }
}
#keyframes enter_sequence {
from { opacity:0; }
to { opacity:1; }
}
And your html simply has to have the class:
class="reveal-animation"
http://jsfiddle.net/bpR66/
If pre version 1.2
Your CSS needs to have -setup, and -setup.-start classes:
.animate-enter-setup {
-webkit-transition:all linear 1s;
-moz-transition:all linear 1s;
-ms-transition:all linear 1s;
-o-transition:all linear 1s;
transition:all linear 1s;
}
.animate-enter-setup {
max-height: 0;
opacity:0;
}
.animate-enter-setup.animate-enter-start {
opacity:1;
min-height: 20px;
}
Here is a fiddle I modified to show an example (not using a form, but should demonstrate): http://jsfiddle.net/xv5ry/1/
i use jpreloader (http://www.inwebson.com/jquery/jpreloader-a-preloading-screen-to-preload-images/). When the preloading finishes, i call the header to move to the screen and i call the content by fading to the screen.
My header is a fixed div (as a sidebar), so when someone opens my page from a small screen, i would like that after the preloading, it calls a relative positioned div from the top to the screen.
Everything works with my code without declaring the window width but when i try to "handicrafting" the script with an "if", it stops working.
I do not know anything about javascript, i tried to fabricate the code with some samples but i can not make it work...
The original javascript which works without window screen declaration :
<script type="text/javascript">
<!--
//If browser is IE8 or older we show IE specific page
if(ie < 9){
ieMessage();
}
/*
* Call functions when dom is ready
*/
$(document).ready(function() {
$('#header').css("left",-300);
$('.background').css("left",-1380);
$('#content').css("opacity",0);
// Preload the page with jPreLoader
$('body').jpreLoader({
showSplash: true
}, function() {
$('#header').animate({"left":0}, 1200);
$('.background').animate({"left":-1080}, 100);
$('#content').delay(1000).animate({"opacity":1}, 2500);
});
});
-->
</script>
The code which does not work but what i think it is not far from the truth (i hope) :
<script>
$(document).ready(function() {
// Function to fade in image sprites
$('.sprite').fadeSprite();
// Function to animate when leaving page
$('.transition, #nav a, #logo, #face a').leavePage();
$('#content').css("opacity",0);
if($(window).width() >= 1023){
$('.background').css("left",-1380);
$('#header').css("left",-300);
}else {
$('.background').css("top",-500);
$('#header').css("top",-230);
},
// Preload the page with jPreLoader
$('body').jpreLoader({
showSplash: true
}, function() {
$('#content').delay(1000).animate({"opacity":1}, 2500);
$('#face').animateHome();
$('#face').resizeFace();
if($(window).width() >= 1023){
$('.background').animate({"left":-1080}, 100);
$('#header').animate({"left":0}, 1200);
}else {
$('.background').animate({"top":-300}, 100);
$('#header').animate({"top":0}, 1200);
}
});
});
</script>
I use the following css :
#header {
top:0;
bottom:0;
left:0;
position:fixed;
width:300px;
}
#header .background {
position:fixed;
width:600px;
height:10000px;
left:-1080px;
top:-150px;
-webkit-transform:rotate(9deg);
-moz-transform:rotate(9deg);
-ms-transform:rotate(9deg);
-o-transform:rotate(9deg);
transform:rotate(9deg);
-webkit-transition:all .5s ease-in-out;
-moz-transition:all .5s ease-in-out;
-ms-transition:all .5s ease-in-out;
-o-transition:all .5s ease-in-out;
transition:all .5s ease-in-out;
background: #2e3740;
}
#media only screen
and (max-width: 1023px) {
#header {
position: relative;
display: block;
width:100%;
height: 230px;
}
#header .background {
position:relative;
width: 94%;
height:500px;
margin: 0 auto 0;
left: 0px;
top: -300px;
-webkit-transform:rotate(9deg);
-moz-transform:rotate(9deg);
-ms-transform:rotate(9deg);
-o-transform:rotate(9deg);
transform:rotate(9deg);
-webkit-transition:all .5s ease-in-out;
-moz-transition:all .5s ease-in-out;
-ms-transition:all .5s ease-in-out;
-o-transition:all .5s ease-in-out;
transition:all .5s ease-in-out;
background: #2e3740;
}
}
If someone can correct my code...
Thanks in advance !
your have syntax errors,Try this code, the position of { is wrong and the : in css function shouldn't be there.
$(document).ready(function() {
if($(window).width() >= 1023){
$('.background').css("left",-1380).animate({"left":-1080}, 100);
$('#header').css("left",-300).animate({"left":0}, 1200);
}else {
$('.background').css("top",-500).animate({"top":-300}, 100);
$('#header').css("top",-230).animate({"top":0}, 1200);
}
});
Edit
Not sure what your javascript logic supposed to be doing but you can combine those like this,
<script>
if(ie < 9){
ieMessage();
}
$(document).ready(function() {
if($(window).width() >= 1023){
$('.background').css("left",-1380).animate({"left":-1080}, 100);
$('#header').css("left":-300).animate({"left":0}, 1200);
{
else {
$('.background').css("top",-500).animate({"top":-300}, 100);
$('#header').css("top":-230).animate({"top":0}, 1200);
}
$('#header').css("left",-300);
$('.background').css("left",-1380);
$('#content').css("opacity",0);
// Preload the page with jPreLoader
$('body').jpreLoader({
showSplash: true
}, function() {
$('#header').animate({"left":0}, 1200);
$('.background').animate({"left":-1080}, 100);
$('#content').delay(1000).animate({"opacity":1}, 2500);
});
});
</script>
You code that doesn't work has a brace around the wrong way. This probably happened because of the odd syntax shaping you are using; Try this;
<script>
$(document).ready(function() {
if($(window).width() >= 1023) {
$('.background').css("left",-1380).animate({"left":-1080}, 100);
$('#header').css("left":-300).animate({"left":0}, 1200);
} else {
$('.background').css("top",-500).animate({"top":-300}, 100);
$('#header').css("top":-230).animate({"top":0}, 1200);
}
});