How I can apply a transition on transform: translateX CSS property in Vue?
I've tried in this way but it doesn't work, I want to have a smooth slide in/out effect when the menu is opened or closed. I'm using Vue and Bootstrap.
<transition name="slide">
<div class="collapse navbar-collapse position-fixed" :class="{ 'show': isVisible }" ref="menuLinks">
<ul class="navbar-nav ml-auto">
<li class="nav-item" v-for="(item, index) in items" :key="index">
<a class="nav-link" :href="item.link">{{ item.title }}</a>
</li>
</ul>
</div>
</transition>
//CSS
.navbar-collapse {
top: 0;
left: 0;
height: 100vh;
width: 25%;
background:white;
right: 0;
padding: 2em;
transition: transform 1s linear;
}
.slide-enter-active, .slide-enter {
//to do animation soft
transition: transform 1s linear;
animation: slideIn;
animation-duration: 1s;
}
.slide-leave-active, .slide-leave-to {
transition: transform 1s linear;
animation: slideOut;
animation-duration: 1s;
}
#keyframes slideIn {
from {
transform: transaletX(-100%);
}
to {
transform: transaletX(0);
}
}
#keyframes slideOut {
from {
transform: translateX(0);
}
to {
transform: translateX(-100%);
}
}
UPDATE
I've removed the transition from .slide-leave-active as suggested but nothing change
.slide-enter-active, .slide-enter {
transition: transform 1s ease-in-out;
animation: slideIn;
animation-duration: 1s;
}
.slide-leave-active, .slide-leave-to {
animation: slideOut;
animation-duration: 1s;
}
Related
Im using <transition> in Vue for traversing between pages, im also using animation for the transition between them but the animation looks like "lagging", how can i change to make it look smooth? I also used will-change but it did not make any changes..
The code:
<div v-if="show">
<div>
<div class="ahmed-text">
<!-- <router-link :to="{ name: 'Home' }"> -->
<img #click="postTransport" class="name" src="https://firebasestorage.googleapis.com/v0/b/projekt-sv.appspot.com/o/documents%2Fnamelog.svg?alt=media&token=92da84bc-4bd1-4f47-b955-06a7b7008e26"/>
<!-- </router-link> -->
</div>
</div>
</div>
</transition>
.mainImage-enter-from{
animation-duration: 2.2s;
animation-name: slidein;
}
.mainImage-enter-active{
animation-duration: 2.2s;
animation-name: slidein;
}
.mainImage-leave-to{
animation-duration: 2.2s;
animation-name: slideout;
}
.mainImage-leave-active{
animation-duration: 2.2s;
animation-name: slideout;
}
/**------Key - Main anim------**/
#keyframes slidein {
0% {
transform: translateX(130%);
width: 100%;
}
100% {
transform: translateX(0%);
width: 100%;
}
}
#keyframes slideout {
0% {
transform: translateX(0%);
width: 100%;
}
100% {
transform: translateX(68%);
width: 100%;
}
}
.ahmed-text{
will-change: transform, opacity;
}```
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>
When I click on a button I want my div to animate. It seems only the show animation is working, but not the hide. The hide animation doesn't work at all even though the attribute values change.
$("#divShow").click(function() {
$('.parent').attr('isopen', 'true');
});
$("#divHide").click(function() {
$('.parent').attr('isopen', 'false');
});
.parent {
display: none; //hidden by default
width: 40px;
height: 40px;
background: blue;
}
#keyframes show {
50% {
transform: scale(1.03);
}
}
#keyframes hide {
50% {
transform: scale(0.97);
}
100% {
opacity: 0;
transform: scale(0.90);
}
}
[isopen="true"] {
display: block;
-webkit-animation: show .3s;
-moz-animation: show .3s;
-ms-animation: show .3s;
animation: show .3s;
}
[isopen="false"] {
-webkit-animation: hide .3s;
-moz-animation: hide .3s;
-ms-animation: hide .3s;
animation: hide .3s;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="divShow">Show</button>
<button id="divHide">Hide</button>
<div class="parent">
</div>
I think I got it working as you wanted. See here code snippet below.
Your show class has display block but when you remove it it gets right back to none. Just add the display none at the end of your hide animation.
Like this:
#keyframes hide {
50% {
transform: scale(0.97);
}
100% {
opacity: 0;
transform: scale(0.90);
display: none;
}
}
[isopen="false"] {
display: block;
animation: hide .3s forwards;
}
Code snippet:
$("#divShow").click(function() {
$('.parent').attr('isopen', 'true');
});
$("#divHide").click(function() {
$('.parent').attr('isopen', 'false');
});
.parent {
display: none; //hidden by default
width: 40px;
height: 40px;
background: blue;
}
#keyframes show {
50% {
transform: scale(1.03);
}
}
#keyframes hide {
50% {
transform: scale(0.97);
}
100% {
opacity: 0;
transform: scale(0.90);
display: none;
}
}
[isopen="true"] {
display: block;
-webkit-animation: show .3s;
-moz-animation: show .3s;
-ms-animation: show .3s;
animation: show .3s;
}
[isopen="false"] {
display: block;
-webkit-animation: hide .3s forwards;
-moz-animation: hide .3s forwards;
-ms-animation: hide .3s forwards;
animation: hide .3s forwards;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="divShow">Show</button>
<button id="divHide">Hide</button>
<div class="parent">
</div>
With the help of this answer: https://stackoverflow.com/a/15407098/2181514
you can add forwards to your animations so that they keep the last (100%) keyframe.
Add display:block to [isopen=false] to ensure it doesn't hide immediately then:
animation: hide .3s forwards;
Updated snippet:
$("#divShow").click(function() {
$('.parent').attr('isopen', 'true');
});
$("#divHide").click(function() {
$('.parent').attr('isopen', 'false');
});
.parent {
display: none;
width: 40px;
height: 40px;
background: blue;
}
#keyframes show {
50% {
transform: scale(1.03);
}
}
#keyframes hide {
50% {
transform: scale(0.97);
}
100% {
opacity: 0;
transform: scale(0.90);
}
}
[isopen="true"] {
display: block;
-webkit-animation: show .3s;
-moz-animation: show .3s;
-ms-animation: show .3s;
animation: show .3s;
}
[isopen="false"] {
display: block;
-webkit-animation: hide .3s forwards;
-moz-animation: hide .3s forwards;
-ms-animation: hide .3s forwards;
animation: hide .3s forwards;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="divShow">Show</button>
<button id="divHide">Hide</button>
<div class="parent">
</div>
Can be done simply, efficiently with less line of code using transition
$("#divShow").click(function() {
$('.parent').addClass('show');
});
$("#divHide").click(function() {
$('.parent').removeClass('show');
});
.parent {
width: 40px;
height: 40px;background: blue;
transform: scale(0.97);
transition: all 0.3s;
opacity:0;
}
.show {
opacity:1;
transform: scale(1.03);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="divShow">Show</button>
<button id="divHide">Hide</button>
<div class="parent">
</div>
I'm trying to animate the navigation overlay to come in from the right (which is working perfectly!), but it's not working when I try to reverse the process. I'm wondering why. Please review the code below and see if you can help me.
HTML
<nav class="nav-element">
<h1>header</h1>
<figure class="nav-img">
<img src="images/svg/menu.svg" alt="Hamburger Menu" id="nav-open">
</figure>
</nav>
<section id="overlay" class="overlay">
<header>
<h1>Header</h1>
<figure class="nav-img">
<img src="images/svg/menu-close.svg" alt="Close Menu" id="nav-close">
</figure>
</header>
<ul>
<li class="nav-button">item 1</li>
<li class="nav-button">item 2</li>
<li class="nav-button">item 3</li>
<li class="nav-button">item 4</li>
</ul>
</section>
SCSS
.show-menu {
display: block;
animation: slide-menu 0.5s ease-in forwards;
header {
animation: show-x 1s 0.5s forwards;
}
li:nth-of-type(1) {
animation: item-1 0.5s 0.5s linear forwards;
}
li:nth-of-type(2) {
animation: item-1 0.5s 0.7s linear forwards;
}
li:nth-of-type(3) {
animation: item-1 0.5s 0.9s linear forwards;
}
li:nth-of-type(4) {
animation: item-1 0.5s 1.1s linear forwards;
}
}
.hide-menu {
display: block;
animation: slide-menu 0.5s 1.1s ease-in forwards;
header {
animation: hide-x 1s 0.5s forwards;
}
li:nth-of-type(1) {
animation: item-hide 0.5s linear forwards;
}
li:nth-of-type(2) {
animation: item-hide 0.5s 0.9s linear forwards;
}
li:nth-of-type(3) {
animation: item-hide 0.5s 0.7s linear forwards;
}
li:nth-of-type(4) {
animation: item-hide 0.5s 0.5s linear forwards;
}
}
#keyframes slide-menu {
from {
transform: scaleX(0);
}
to {
transform: scaleX(1);
}
}
#keyframes show-x {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#keyframes item-1 {
from {
transform: translateX(10%);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
#keyframes hide-menu {
from {
transform: scaleX(1);
}
to {
transform: scaleX(0);
}
}
#keyframes hide-x {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
#keyframes item-hide {
from {
transform: translateX(0);
opacity: 1;
}
to {
transform: translateX(10%);
opacity: 0;
}
}
Javascript
const overlay = document.getElementById('overlay');
document.getElementById('nav-open').addEventListener('click', function() {
overlay.classList.add('show-menu');
})
document.getElementById('nav-close').addEventListener('click', function() {
overlay.classList.add('hide-menu');
overlay.classList.remove('show-menu');
})
Can anyone help me why the animation isn't "reversed" and the menu closes the same way it opens?
So first the items move on the X-axis and disappear, then the header content fades, and lastly the overlay moves from the X-axis and disappears.
Try this CSS for the .hide-menu, Adding the reverse property will reverse the animation when clicking the hide button:
.hide-menu {
display: block;
animation: slide-menu 0.5s 1.1s ease-in reverse;
header {
animation: hide-x 1s 0.5s reverse;
}
li:nth-of-type(1) {
animation: item-hide 0.5s linear reverse;
}
li:nth-of-type(2) {
animation: item-hide 0.5s 0.9s linear reverse;
}
li:nth-of-type(3) {
animation: item-hide 0.5s 0.7s linear reverse;
}
li:nth-of-type(4) {
animation: item-hide 0.5s 0.5s linear reverse;
}
}
Heres a JSFiddle Example
I am using the carousel component with ng-bootstrap. I understand there's an open issue for a proper animation feature that works correctly with the angular 2 component life cycle right now (Github issue).
My question: is there a way to use CSS as a workaround for the animation?
I have put up a plunker that has fade in effect for the carousel, but not fade out.
.carousel-item.active{
-webkit-animation: fadein 1.4s;
-moz-animation: fadein 1.4s;
-ms-animation: fadein 1.4s;
-o-animation: fadein 1.4s;
animation: fadein 1.4s;
}
#keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Firefox < 16 */
#-moz-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Safari, Chrome and Opera > 12.1 */
#-webkit-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Internet Explorer */
#-ms-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Opera < 12.1 */
#-o-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
Is there a way to make a fade out work? I have tried transition but failed.
I wanted a fade in/fade out the transition between slides and found a simpler solution to this:
::ng-deep {
.carousel-item {
transition: opacity 0.7s ease !important;
position: absolute !important;
display: block !important;
opacity: 0;
}
.carousel-item.active {
position: relative !important;
opacity: 1;
}
}
If you don't want to use ::ng-deep (it seems that is going to be deprecated, or at least I read so last week in angular.io) you can use a global styles file that will reach all classes in all components
Alright, answering my own question. The following CSS hack will make the animation work just fine
ngb-carousel {
width: inherit;
height: inherit;
}
.carousel-inner {
overflow: visible;
}
.carousel-item {
display: flex !important;
opacity: 0;
visibility: hidden;
transition: opacity 1.2s ease-in-out, visibility 1.2s;
z-index: -1;
position: absolute;
}
.carousel-item.active{
opacity: 1;
visibility: visible;
z-index: 10;
}
.carousel-control-prev {
z-index: 20;
}
.carousel-control-next {
z-index: 20;
}
.carousel-indicators{
z-index: 20;
}
Working Plunker
I managed to create left-to-right slide animation based on your approach. active slide goes out with transition to the right when it loses .active and then new .active slides in with delayed animation.
though I recommend using ngx-swiper-wrapper instead - best angular carousel I found so far (https://idangero.us/swiper/)
.carousel-inner {
width: 640px;
height: 240px;
}
.carousel-item {
padding: 40px 55px;
opacity: 0;
transition: opacity .3s ease-in-out;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
z-index: 0;
display: block !important;
}
.carousel-item.active {
z-index: 1;
opacity: 1;
transition-delay: .3s;
transform: none;
animation: slideFromLeft .3s;
animation-delay: .3s;
}
#keyframes slideFromLeft {
from {
transform: translateX(-100%);
}
to {
transform: none;
}
}
Here are two animations I used in Angular 9, ng-bootstrap version 6.0.0. Easiest way is to give an entrance animation to .carousel-item.active. Animations are taken from animista.net/play/entrances. Just make sure you add the css to global styles.css
Animation 1
.carousel-item.active {
-webkit-animation: flip-in-ver-left 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
animation: flip-in-ver-left 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
#-webkit-keyframes flip-in-ver-left {
0% {
-webkit-transform: rotateY(80deg);
transform: rotateY(80deg);
opacity: 0;
}
100% {
-webkit-transform: rotateY(0);
transform: rotateY(0);
opacity: 1;
}
}
#keyframes flip-in-ver-left {
0% {
-webkit-transform: rotateY(80deg);
transform: rotateY(80deg);
opacity: 0;
}
100% {
-webkit-transform: rotateY(0);
transform: rotateY(0);
opacity: 1;
}
}
Animation 2
.carousel-item.active {
-webkit-animation: tilt-in-fwd-tr 0.6s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
animation: tilt-in-fwd-tr 0.6s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
#-webkit-keyframes tilt-in-fwd-tr {
0% {
-webkit-transform: rotateY(20deg) rotateX(35deg) translate(300px, -300px) skew(-35deg, 10deg);
transform: rotateY(20deg) rotateX(35deg) translate(300px, -300px) skew(-35deg, 10deg);
opacity: 0;
}
100% {
-webkit-transform: rotateY(0) rotateX(0deg) translate(0, 0) skew(0deg, 0deg);
transform: rotateY(0) rotateX(0deg) translate(0, 0) skew(0deg, 0deg);
opacity: 1;
}
}
#keyframes tilt-in-fwd-tr {
0% {
-webkit-transform: rotateY(20deg) rotateX(35deg) translate(300px, -300px) skew(-35deg, 10deg);
transform: rotateY(20deg) rotateX(35deg) translate(300px, -300px) skew(-35deg, 10deg);
opacity: 0;
}
100% {
-webkit-transform: rotateY(0) rotateX(0deg) translate(0, 0) skew(0deg, 0deg);
transform: rotateY(0) rotateX(0deg) translate(0, 0) skew(0deg, 0deg);
opacity: 1;
}
}
Got it to work in angular 7 after tweaking #user3682091 answer
Hope it helps someone else
Here's my html
<div class="section" id="carousel">
<div class="container">
<div class="title">
<h4>Carousel</h4>
</div>
<div class="row justify-content-center" style="height: 50vw;">
<div class="col-12" style="height: 100%; width:100%">
<ngb-carousel>
<ng-template ngbSlide>
<img class="d-block" src="assets/img/bg1.jpg" alt="First slide">
<div class="carousel-caption d-none d-md-block">
<h5>Nature, United States</h5>
</div>
</ng-template>
<ng-template ngbSlide>
<img class="d-block" src="assets/img/bg3.jpg" alt="Second slide">
<div class="carousel-caption d-none d-md-block">
<h5>Somewhere Beyond, United States</h5>
</div>
</ng-template>
<ng-template ngbSlide>
<img class="d-block" src="assets/img/bg4.jpg" alt="Third slide">
<div class="carousel-caption d-none d-md-block">
<h5>Yellowstone National Park, United States</h5>
</div>
</ng-template>
</ngb-carousel>
</div>
</div>
</div>
</div>
Here's my style.css file(global css)
ngb-carousel {
// width: inherit;
// height: inherit;
width: 100%;
height: 100%;
}
.carousel-inner {
overflow: visible;
}
.carousel-item {
display: flex !important;
opacity: 0;
visibility: hidden;
transition: opacity 1.2s ease-in-out, visibility 1.2s;
z-index: -1;
position: absolute;
}
.carousel-item.active {
opacity: 1;
visibility: visible;
transition: opacity 1.2s ease-in-out, visibility 1.2s;
z-index: 10;
}
.carousel-control-prev {
z-index: 20;
}
.carousel-control-next {
z-index: 20;
}
.carousel-indicators {
z-index: 20;
}