vue transition component doesn't work correctly - javascript

hello this is a simple code but i don't know what is problem.
when i click on open modal on parent component modal get open but without transition
i just write it from a tutorial and in tutorial it work correctlry
<template>
<div class="backdrop" #click="$emit('close')" v-if="open"></div>
<transition name="modal" mode="out-in">
<dialog open v-if="open">
<slot></slot>
</dialog>
</transition>
</template>
<script>
export default {
emits: ['close'],
props:['open']
};
</script>
<style scoped>
.modal-enter-active{
animation: modal 2s linear;
}
.modal-leave-active{
animation: modal 2s linear;
}
#keyframes modal {
from{
opacity: 0;
transform:translateY(-150px) scale(0)
}
to{
opacity: 1;
transform:translateY(0) scale(1)
}
}
</style>
i am using vue 3

Do you actually need to use CSS animations?
How about using simple transitions?
.modal-enter-active, .modal-leave-active {
transition: 2s;
transition-timing-function: linear;
}
.modal-enter, .modal-leave-to {
opacity: 0;
transform:translateY(-150px) scale(0);
}

Related

CSS Transition on open and close Menu in React

I have MenuBody component which is showed if state of isOpen is true. I want to add transition when menu is opening and also when is closing. Animation for opening is working but on closing it doesn't work.
This is my code
const [isOpen, setIsOpen] = useState(false);
<button onClick={()=>setIsOpen(!isOpen)}>open menu</button>
{isOpen ? <MenuBody /> : null}
....
const MenuBody = () => {
return (
<div className={styles.menuBody}>
//some content here to display when it's opened
</div>
)}
CSS
#-webkit-keyframes menuBody {
0% { opacity: 0; }
100% { opacity: 1; }
}
#-moz-keyframes menuBody {
0% { opacity: 0; }
100% { opacity: 1; }
}
#-o-keyframes menuBody {
0% { opacity: 0; }
100% { opacity: 1; }
}
#keyframes menuBody {
0% { opacity: 0; }
100% { opacity: 1; }
}
.menuBody {
....
-webkit-animation: menuBody 0.5s ease-in-out;
-moz-animation: menuBody 0.5s ease-in-out;
-o-animation: menuBody 0.5s ease-in-out;
animation: menuBody 0.5s ease-in-out;
}
I would appreciate any kind of help
Thanks
I think that the problem might be in the way how you wrote MenuBody or in isOpen since you didn't provide any code regarding closing I am gonna assume, that maybe it's missing. So I would recommend adding some button into the MenuBody which will be able to change the state of isOpen.
EDIT #1
I would recommend adding and removing a class that says if Modal is open or closed. I would recommend using this method described here: https://erikmartinjordan.com/react-on-disappear-animation

Vue Js - Transition only when component is visible

I'm doing some transitions using the transition tag and they're working perfectly. The problem is that transitions happen even if the component is not visible, I wanted it to happen only when the user arrived on that part of the page. Is there any way to do this with Vue?
HTML:
<transition name="products" appear>
<h2 class="container">Products</h2>
</transition>
CSS:
#keyframes slide-in {
from { transform: translateX(-60px); }
to { transform: translateX(0); }
}
.products-enter-active {
animation: slide-in 2s ease;
}

CSS animation suddenly ends

I created a spinner animation. On click on spinner, JS adds class "loading" and it starts rotating. But if I remove this class it returns to the previous position without animation.
I tried to use this:
animation-fill-mode: forwards;, but result was the same.
There is my CSS:
.loading {
animation: spin 1s linear infinite 0s forwards;
}
#keyframes spin{
from{
transform: rotate(0deg)
}
to{
transform: rotate(360deg)
}
}
And HTML:
<i class="material-icons refresh-icon" onclick="$(this).toggleClass('loading');">refresh</i>
Thanks for your suggestions. I did it using JS and animationiteration event.
HTML:
<div class="spinner">
<i class="material-icons refresh-icon" onclick="spinner(this)">refresh</i>
</div>
JS:
const spinner = el => {
if($(el).hasClass('lock')) return;
if($(el).hasClass('loading')){
$(el).addClass('lock').one('animationiteration webkitAnimationIteration', function() {
$(el).removeClass('loading').removeClass('lock');
});
}else{
$(el).addClass('loading');
}
}
Link to codepan: https://codepen.io/nenazarko/pen/zYGPoZy

have jquery add(or trigger?) an animation

So I have a graph that is filled out through a nice animation. This happens because every bar in the graph has the css attribute
animation: slide-left 0.9s ease-in-out 1s both;
The animation looks like this:
#keyframes slide-left {
0% {
-webkit-transform: translateX(-200%);
}
70% {
-webkit-transform: translateX(2%);
}
100% {
-webkit-transform: translateX(0);
}
}
Now, I'm not very good at javascript but I'd like this to happen on the click of a button (and have the graph hidden until the button is clicked) instead of when the page loads.
Now I've removed the animation-attribute from the css-selector and added translateX(-200%);
Realized that if I add animation: slide-left 0.9s ease-in-out 1s both; through inspect element, exactly what I want happens.
So I found a "solution" that looks like this:
$("#button").on('click', show_function);
function show_function() {
$(".graph").fadeIn("slow");
$('<style>.bar-container>* { animation: slide-left 1s ease-in-out 1s both; }</style>').prependTo('body');
}
This feels "clunky" and it takes almost a second to load. So I was wondering what a better way to have a function trigger the animation in javascript/JQuery would be?
Your best answer is likely to be have the animation sequence in a class, and use jQuery to add the class. E.g.
CSS
#keyframes slide-left {
0% {
-webkit-transform: translateX(-200%);
}
70% {
-webkit-transform: translateX(2%);
}
100% {
-webkit-transform: translateX(0);
}
}
.slide-it {
animation: slide-left 0.9s ease-in-out 1s both;
}
And then JS
$("#button").on('click', show_function);
function show_function() {
$(".graph").fadeIn("slow");
$('.bar-container').addClass('slide-it');
}

Angular 1.2.x ng-hide and ng-show css transition

I have read the various docs and how-to sites on this, but no matter what I do, I cannot get a div being shown to show a css transition.
<div class="row reveal-animation" ng-show="partneradd.showEntitlements">
<div class="col-md-6">
<fieldset>
<legend>Entitlements</legend>
stuff
</fieldset>
</div>
</div>
Where the ng-show value is a boolean that is toggled to true by a button on the page. This works fine. But no transition.
Following some code found on the angular site, I am using this in my sass:
.reveal-animation.ng-enter {
-webkit-transition: 2s linear all;
transition: 2s linear all;
opacity: 0;
}
.reveal-animation.ng-enter.ng-enter-active {
opacity: 1;
}
But nothing. What did I do wrong here?
Edit: I have indeed loaded the ng-animate module and injected it into my app.js
hope it can help you, you can just add an class on hide and show like here it is on click
<div class="row reveal-animation"
ng-class="{'foo':!partneradd.showEntitlements }" ng-show="partneradd.showEntitlements">
An Simple example :
angular.module('myApp',[])
.controller('ctrl', function ($scope){
$scope.bar = false;
$scope.clicked = function(){
$scope.bar = !($scope.bar);
}
});
.myDiv{
width:400px;
height:200px;
background-color:red;
-webkit-transition: 1s linear;
/*to only change opacity*/
/*-webkit-transition: opacity 1s linear*/
-moz-transition: 1s linear;
-o-transition: 1s linear;
transition: 1s linear;
opacity: 1;
}
.foo{
background-color: blue;
opacity: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js"></script>
<div ng-app="myApp">
<div ng-controller='ctrl'>
<button ng-click='clicked()'>Click me to change class</button>
<div ng-class="{foo: bar}" class='myDiv'>
</div>
</div>
</div>
ng-show is working with ng-hide class (take a look here for additional info and supported classes):
.reveal-animation {
-webkit-transition: 1s all linear;
transition:all linear 1s;
opacity:1;
}
.reveal-animation.ng-hide {
opacity: 0;
}

Categories