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
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
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;
}
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
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');
}
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;
}