I'm new to AngularJS but before asking this question i've searched and searched for an answer on how to do this the Angular Way but have come up short.
What i'm looking to do:
Have child animations of a view trigger [delay] until after the view[parent] has animated in or has slightly animated in/out.
I currently have everything set up with ui-view and have the pages animating in and out without any problems. But, if I try to delay a child animation or have its animation longer than the duration of the parent animation then it just jumps instead of animating.
From what I can tell, this is because ng-enter and ng-leave get removed after the parent is done animating, as designed.
I have created a Plunker to show this: http://plnkr.co/edit/5iOb1j0l8lFaMZfrKIFh?p=preview
The animations are being done via CSS:
.ui-animate {
$enLvDur: .8s;
$delay: 1s;
&.ng-enter,
&.ng-leave {
position:absolute;
top: 100px; right: 0;
bottom: 0; left: 0;
transform: -webkit-translateX(0px);
transform: -ms-translateX(0px);
transform: translateX(0px);
}
&.ng-enter {
z-index: 2;
transform: -webkit-translateX(100%);
transform: -ms-translateX(100%);
transform: translateX(100%);
transition: -webkit-transform $enLvDur ease-in-out 0s;
transition: -ms-transform $enLvDur ease-in-out 0s;
transition: transform $enLvDur ease-in-out 0s;
.child-delay {
opacity: 0;
transition: opacity $enLvDur ease-in-out $delay;
}
}
&.ng-enter-active {
transform: -webkit-translateX(0px);
transform: -ms-translateX(0px);
transform: translateX(0px);
.child-delay {
opacity: 1;
}
}
&.ng-leave {
z-index: 1;
transform: -webkit-translateX(0px);
transform: -ms-translateX(0px);
transform: translateX(0px);
transition: -webkit-transform $enLvDur ease-in-out 0s;
transition: -ms-transform $enLvDur ease-in-out 0s;
transition: transform $enLvDur ease-in-out 0s;
}
&.ng-leave-active {
transform: -webkit-translateX(100%);
transform: -ms-translateX(100%);
transform: translateX(100%);
}
}
If you click between the pages you'll see the yellow box doesn't animate because it has a 1s delay on it while the parent has a .8s animation duration. (you can change this in the style.scss file)
So, how would I go about having a views children animate, no matter the delay or duration when a view is brought in and removed?
Related
As you can see in the image attached, the airplane image is moving to left intentionally. But I don't want its position to move out of the alignment. I want to have something like parallax effect but on hover like this website is doing. https://digitalsilk.com/. I have just started website development.
I want to know how I can have these image transition from https://digitalsilk.com/. But I am not able to recreate that transition. I am having trouble with one thing that is moving the back airplane image a little to the left without moving its position (like a parallel effect) You can see the main page gallery of the website attached in desktop view.
<div id="outter-image">
<div class="tilt-box">
<div class="tilt-bg-image-box">
<img class="bg-image" src="https://www.digitalsilk.com/wp-content/themes/digitalsilk/assets/images/seo_pages/recent-projects/tecnam_bg.webp" />
</div>
<img class="overlay-image" src="https://www.digitalsilk.com/wp-content/themes/digitalsilk/assets/images/seo_pages/recent-projects/webp/Tecam_recent_mockup-min.webp" />
</div>
</div>
<style>
.overlay-image {
top: -20px;
right: -20%;
position: absolute;
width: 60%;
aspect-ratio: auto 299 /566;
height: 120%;
transition: transform .6s ease-in-out, opacity .5s;
opacity: 0;
transform: perspective(1000px) rotateY( -60deg);
}
.tilt-bg-image-box {
transition: transform .6s ease-in-out, opacity .5s, -webkit-transform .6s ease-in-out;
}
.bg-image {
transition: transform 1s .4s linear, opacity .5s, -webkit-transform 1s .4s
}
.tilt-box:hover .bg-image {
transform: translate3d(-8%, 0, 0);
}
.tilt-box:hover .overlay-image {
opacity: 1;
-webkit-transform: perspective(1000px) rotateY( -20deg);
transform: perspective(1000px) rotateY( -20deg);
}
.tilt-box:hover .tilt-bg-image-box {
transform: perspective(1000px) rotateY(20deg);
}
.tilt-box:hover .bg-image {
transition: transform 4s .4s linear, opacity .5s, -webkit-transform 4s .4s
}
</style>
The trick is to set the width to the image wrapper and overflow:hidden.
I know the picture of plane is cut of a bit. You need to scale the picture and position it a little bit different. Or change the picture itself.
When I checked your code, I would recomand you also to wrap everything to some wrapper with fixed size. It doesnt look like you expected on full screen.
<div id="outter-image">
<div class="tilt-box">
<div class="tilt-bg-image-box">
<img class="bg-image" src="https://www.digitalsilk.com/wp-content/themes/digitalsilk/assets/images/seo_pages/recent-projects/tecnam_bg.webp" />
</div>
<img class="overlay-image" src="https://www.digitalsilk.com/wp-content/themes/digitalsilk/assets/images/seo_pages/recent-projects/webp/Tecam_recent_mockup-min.webp" />
</div>
</div>
<style>
.overlay-image {
top: -20px;
right: -20%;
position: absolute;
width: 60%;
aspect-ratio: auto 299 /566;
height: 120%;
transition: transform .6s ease-in-out, opacity .5s;
opacity: 0;
transform: perspective(1000px) rotateY( -60deg);
}
.tilt-bg-image-box {
width: 600px;
height: auto;
overflow: hidden;
transition: transform .6s ease-in-out, opacity .5s;
}
.bg-image {
transition: transform 1s .4s linear, opacity .5s;
}
.tilt-box:hover .bg-image {
transform: translate3d(-8%, 0, 0);
}
.tilt-box:hover .overlay-image {
opacity: 1;
-webkit-transform: perspective(1000px) rotateY( -20deg);
transform: perspective(1000px) rotateY( -20deg);
}
.tilt-box:hover .tilt-bg-image-box {
transform: perspective(1000px) rotateY(20deg);
}
.tilt-box:hover .bg-image {
transition: transform 4s .4s linear, opacity .5s;
}
</style>
I am trying to develop an Image slider. I want the images to zoom in until the next image takeover occurs. I am currently using the transform scale property. It is overflowing the width and causes a scrollbar to be displayed. How can this scrollbar be removed?
HTML:
<div id="pn-head">
</div>
JS:
var i = 1;
function tSlide(){
if(i<=5){
jQuery('#pyn-head').attr('class','pn-head head-bg'+i);
}
i = i+1;
if(i==6){
i=1;
}
}
tSlide();
setInterval(tSlide , 5000);
CSS:
.pn-head{
height: 700px;
background-size: cover !important;
background-repeat: no-repeat !important;
-webkit-transition: background 1s ease-out;
-moz-transition: background 1s ease-out;
-o-transition: background 1s ease-out;
transition: background 1s ease-out;
-webkit-transition: transform 2s ease-out 1s;
-moz-transition: transform 2s ease-out 1s;
-o-transition: transform 2s ease-out 1s;
transition: transform 2s ease-out 1s;
}
.head-bg1{
background: url('../img/b1.png');
transform: scale(1.1);
}
.head-bg2{
background: url('../img/b2.png');
transform: scale(1.2);
}
.head-bg3{
background: url('../img/b3.png');
transform: scale(1.3);
}
.head-bg4{
background: url('../img/b4.png');
transform: scale(1.4);
}
.head-bg5{
background: url('../img/b5.png');
transform: scale(1.5);
}
Add this to remove all scrollbars:
<style type="text/css">
body {
overflow:hidden;
}
</style>
I am developing a single-page Javascript application that runs on desktop browsers and also on mobile devices via Cordova/Phonegap.
I have a slide-out menu that is implemented using CSS transitions. I noticed that it works well on desktop browsers and android. However, on IOS there are serious performance issues. The transition does not appear to start on time, but once it starts the rendering and duration looks fine. The time between starting the transition and the transitionend event is way higher on IOS than other platforms. For example, the duration of the transition is 300ms but I'm not getting the transitionend event for 1500ms. On all other platforms, I get the transitionend event in 325-350ms.
Transitionend Event:
Expected: 350ms
Actual: 1500ms
Platforms:
Cordova 6.3.1
Xcode 8.1 GM Seed
IOS 10.1
Here is the CSS for the menu div. To slide-out the menu, I add the 'open' class. To close the menu, I remove the 'open' class. I've tried transitioning on the 'left' property and 'transform' property, but the results are identical.
/* Nav Menu */
#navmenu {
position: absolute;
top: 0;
width: 90%;
max-width: 400px;
z-index: 20;
height: auto;
background-color: white;
/*
-webkit-transform: translate3d(-100%,0,0);
-moz-transform: translate3d(-100%,0,0);
-ms-transform: translate3d(-100%,0,0);
transform: translate3d(-100%,0,0);
-webkit-transition: -webkit-transform 300ms ease;
-moz-transition: -moz-transform 300ms ease;
-ms-transition: -ms-transform 300ms ease;
-o-transition: -o-transform 300ms ease;
transition: transform 300ms ease;
*/
left: -100%;
-webkit-transition: left 300ms ease;
-moz-transition: left 300ms ease;
-ms-transition: left 300ms ease;
-o-transition: left 300ms ease;
transition: left 300ms ease;
}
#navmenu.open {
/*
-webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
-webkit-transition: -webkit-transform 300ms ease;
-moz-transition: -moz-transform 300ms ease;
-ms-transition: -ms-transform 300ms ease;
-o-transition: -o-transform 300ms ease;
transition: transform 300ms ease;
*/
left: 0;
-webkit-transition: left 300ms ease;
-moz-transition: left 300ms ease;
-ms-transition: left 300ms ease;
-o-transition: left 300ms ease;
transition: left 300ms ease;
}
Question: What might be causing the delay in starting the transition, only on IOS platforms? Are there any known solutions to circumvent the problem or speed things up? I have other transitions in the app that take over 5s to start, making the app unusable. I'm hoping the menu solution will apply throughout the app. Thanks for any help or ideas you can provide.
Here is the instrumented Javascript code that I use to open/close the menu...
utilities.addEventListeners(navMenuButtonDiv, function () {
var start = Date.now();
var menuDiv = navMenu.getDiv();
if (menuDiv.classList.contains('open')) {
menuDiv.classList.remove('open');
} else {
menuDiv.classList.add('open');
}
var handler = function (event) {
console.log('Transition: ' + (Date.now() - start));
menuDiv.removeEventListener('webkitTransitionEnd', handler, true);
};
menuDiv.addEventListener('webkitTransitionEnd', handler, true);
};
When moving elements around the screen, you want to maximize performance. Instead of transitioning the left property, you're better off using translation. Using translation, the device will use its GPU to render the onscreen change, on a layer above the DOM. This will result in a smoother, more performant transition.
Have a look at this example. Besides using a transform instead of changing the left property, notice that I removed a bit of redundancy. You don't need to redeclare the transition on the active state.
var open = document.getElementById("open"),
close = document.getElementById("close"),
nav = document.getElementById("navmenu");
open.addEventListener("click", function() {
nav.classList.add("open");
});
close.addEventListener("click", function() {
nav.classList.remove("open");
});
#navmenu {
position: absolute;
top: 0;
left: 0;
width: 90%;
max-width: 400px;
z-index: 20;
height: auto;
background-color: white;
transform: translate3d(-100%, 0, 0);
-webkit-transition: transform 300ms ease-in-out;
-moz-transition: transform 300ms ease-in-out;
-ms-transition: transform 300ms ease-in-out;
-o-transition: transform 300ms ease-in-out;
transition: transform 300ms ease-in-out;
}
#navmenu.open {
transform: translate3d(0, 0, 0);
}
button {
margin-top: 100px;
}
<div id="navmenu">stuff in here</div>
<button id="open">Open Menu</button>
<button id="close">Close Menu</button>
Basically what I'm trying to do is have a transition with transform applied on the :hover:before element so that when you hover with your mouse over ava.png the :before element smoothly appears instead of instantly.
I've tried adding the transition code to the :hover:after class (as seen in the code below) and I tried one of the solutions I found on StackOverflow, changing :hover to :before and adding the content + transition to that class. Needless to say none of my attempts worked or I wouldn't be here right now. (:D)
If anyone could take the time to help me out that'd be highly appreciated, thanks!
#header .inner {
-moz-transition: -moz-transform 1.5s ease, opacity 2s ease;
-webkit-transition: -webkit-transform 1.5s ease, opacity 2s ease;
-ms-transition: -ms-transform 1.5s ease, opacity 2s ease;
transition: transform 1.5s ease, opacity 2s ease;
-moz-transition-delay: 0.25s;
-webkit-transition-delay: 0.25s;
-ms-transition-delay: 0.25s;
transition-delay: 0.25s;
-moz-transform: scale(1);
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
opacity: 1;
position: relative;
z-index: 1;
}
#slide1 {
position: relative;
margin-left: 147px;
margin-top: 0px;
z-index: 100;
width: 98px;
height: 92px;
display: inline-block;
background-image: url("https://www.upload.ee/image/6050955/ava.png");
}
#slide1:hover {
position: relative;
}
#slide1:hover:before {
content: url("https://www.upload.ee/image/6050956/ava_background_hoover.png");
display: block;
z-index: -1;
position: absolute;
margin-left: -150px;
margin-top: -50px;
-moz-transition: -moz-transform 1.5s ease, opacity 2s ease;
-webkit-transition: -webkit-transform 1.5s ease, opacity 2s ease;
-ms-transition: -ms-transform 1.5s ease, opacity 2s ease;
transition: transform 1.5s ease, opacity 2s ease;
-moz-transform: scale(1);
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
#slide2 {
position: relative;
margin-left: 0px;
margin-top: 0px;
z-index: 100;
width: 140px;
height: 160px;
display: inline-block;
background-image: url("https://www.upload.ee/image/6050954/arrow.png");
}
<div class="inner">
<a id="slide1" href="/insider-informatie/over-mij.html"></a>
<div id="slide2"></div>
<h1>Header 1</h1>
<p>My text</p>
</div>
To animate transition you need a to have some kind of a change in the elements properties. This means that the element should be part of the page, displayed (ie no display: none) and visible (no visibility: hidden), but somehow invisible / transparent (opacity: 0 for example).
In your case, you don't create the :before element unless you want to display it. To solve that render the :before with scale(0), and on over change it to scale(1):
#header .inner {
-moz-transition: -moz-transform 1.5s ease, opacity 2s ease;
-webkit-transition: -webkit-transform 1.5s ease, opacity 2s ease;
-ms-transition: -ms-transform 1.5s ease, opacity 2s ease;
transition: transform 1.5s ease, opacity 2s ease;
-moz-transition-delay: 0.25s;
-webkit-transition-delay: 0.25s;
-ms-transition-delay: 0.25s;
transition-delay: 0.25s;
-moz-transform: scale(1);
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
opacity: 1;
position: relative;
z-index: 1;
}
#slide1 {
position: relative;
margin-left: 147px;
margin-top: 0px;
z-index: 100;
width: 98px;
height: 92px;
display: inline-block;
background-image: url("https://www.upload.ee/image/6050955/ava.png");
}
#slide1:hover {
position: relative;
}
#slide1:before {
content: url("https://www.upload.ee/image/6050956/ava_background_hoover.png");
display: block;
z-index: -1;
position: absolute;
margin-left: -150px;
margin-top: -50px;
-moz-transition: -moz-transform 1.5s ease, opacity 2s ease;
-webkit-transition: -webkit-transform 1.5s ease, opacity 2s ease;
-ms-transition: -ms-transform 1.5s ease, opacity 2s ease;
transition: transform 1.5s ease, opacity 2s ease;
-moz-transform: scale(0);
-webkit-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
}
#slide1:hover:before {
-moz-transform: scale(1);
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
#slide2 {
position: relative;
margin-left: 0px;
margin-top: 0px;
z-index: 100;
width: 140px;
height: 160px;
display: inline-block;
background-image: url("https://www.upload.ee/image/6050954/arrow.png");
}
<div class="inner">
<a id="slide1" href="/insider-informatie/over-mij.html"></a>
<div id="slide2"></div>
<h1>Header 1</h1>
<p>My text</p>
</div>
When I click the div, I'm trying to make the div turn into a green 30x30 circle over a course of 2 seconds. And then 3 seconds after the animation is done running, I want the red area go back to its original state.
With my code so far, I'm able to click the div and change it's size to 30x30 and shape to a circle
Here's my code so far:
#blue-box {
height: 100px;
width: 100px;
background: blue;
/* transition:background-color .5s ease-in; */
transition: background-color 0.5s ease;
-webkit-transition: -webkit-transform 0.5s ease-in-out;
-webkit-transition: -webkit-transform 0.5s ease-in-out;
-webkit-transition: -webkit-transform 0.5s ease-in-out;
-webkit-transition: -webkit-transform 0.5s ease-in-out;
transition: transform 0.5s ease-in-out, background-color 2s ease 3s;
}
.box-change {
background-color: green;
border-radius: 100%;
-webkit-transform: scale(.3, .3);
-moz-transform: scale(.3, ,.3);
-o-transform: scale(.3, .3);
-ms-transform: scale(.3, .3);
transform: scale(.3, .3);
}
var box = $('#blue-box');
box.on('click', function(){
box.toggleClass('box-change');
if (box.hasClass('box-change'))
console.log("testing123");
else
console.log("testing testing!");
});
http://jsfiddle.net/gatordh7/gxes2ep3/
To the #blue-box div, I tried including: "transition:background-color .5s ease-in", and then setting the background-color to green on the .box-change class I toggled when the div was clicked, but I still can't figure this out.
What am I doing wrong?
Fixed in this one http://jsfiddle.net/gxes2ep3/3/
var box = $('.blue-box');
box.on('click', function(){
box.toggleClass('box-change');
if (box.hasClass('box-change'))
console.log("testing123");
else
console.log("testing testing!");
});
You were using id for the box, ids have a higher priority than classes. Also, the css background-color was not the same in blue box and in box-change rules. Ans you had a 3s delay for the color