When testing the below Vue component on my iPhone or MacBook (differing results on chrome/safari), I have stuttery/laggy transitions when different classes are toggled on or off. This particular example is of a Vertical Navigation menu, that is hidden off screen on mobile, then moved into position when a button is clicked.
On iOS safari, the transition is slow and individual frames are visible. On iOS Chrome the menu "snaps" into place, skipping the transition altogether. On MacOS Chrome/Safari, the transition lags a small amount.
<template>
<div class="w-0 md:w-1/5 absolute sm:relative sm:block h-full transform top-0 w-64 select-none
overflow-auto ease-in-out transition-all duration-300 z-30 -translate-x-[300px] md:translate-x-0 overflow-y-hidden" :class="{'-translate-x-0': open}" v-click-outside="toggleMobileNav">
<aside class="h-full" aria-label="Sidebar">
<div class="py-4 px-3 bg-white dark:bg-primary-dark h-full overflow-y-auto shadow-lg" >
...continues
Find below my Tailwind CSS config (I'm probably missing an option):
module.exports = {
darkMode: "class",
theme: {
extend: {
zIndex: {
'-10': '-10',
},
colors: {
'primary': '#1be396',
'primary-dark': '#181818',
'primary-dark-lighter': '#232325',
'danger': '#e11d48',
'info': '#3083DC',
'warning': '#FCA311',
}
},
},
plugins: [
require('tailwind-scrollbar'),
require('autoprefixer')
],
variants: {
scrollbar: ['rounded']
},
content: [
`components/**/*.{vue,js}`,
`layouts/**/*.vue`,
`pages/**/*.vue`,
`composables/**/*.{js,ts}`,
`plugins/**/*.{js,ts}`,
`App.{js,ts,vue}`,
`app.{js,ts,vue}`
]
}
Related
I created this codepen, which is a simple flip card and it works fine in codepen, but when I add this project in my vue project created with cli, everything works fine; upon clicking a card, it shows back of the card, but it doesn't apply that transition so user can visually see that it is rotating. It rotates very fast, sounds like transition is not effecting.
This is the template code
<div v-for="card in cards" #click="toggleCard(card)" :key="card.id">
<transition name="flip">
<div
v-bind:key="card.flipped"
v-html="card.flipped ? card.back : card.front"
></div>
</transition>
</div>
and the script code
export default {
name: "FlipCard",
data() {
return {
cards: [
// cards here
],
};
},
methods: {
toggleCard: function (card) {
const isFlipped = card.flipped;
this.cards.forEach((strategy) => {
strategy.flipped = false;
});
isFlipped === true ? (card.flipped = false) : (card.flipped = true);
},
},
};
and css code:
.flip-enter-active {
transition: all 2s ease;
}
.flip-leave-active {
display: none;
}
.flip-enter,
.flip-leave {
transform: rotateY(180deg) !important;
opacity: 0;
}
can anyone help why in vue cli project the transition is so fast or maybe not applying?
Thank you in advance
The codepen you provided uses Vue 2. Your question is tagged Vue 3, so I assume you are using Vue 3.
Vue 3 made changes to transition class names - https://v3-migration.vuejs.org/breaking-changes/transition.html#_2-x-syntax.
-enter and -leave are now -enter-from and -leave-from.
I have a simple VueJS application where I have multiple routes. For a pair of routes, I want to have a scroll down and scroll up animation while routes change.
For example, I have a search/dropdown page, where after the search result from the dropdown is selected, I want to take him to the details page but with a scroll down animation. So that the user feels he is still on the same page.
I have tried using the VuePageTransition library. That is indeed a great library but does not have this specific animation that I need.
Update:
I tried the following code. It gives a scroll-like animation but the leaving page is shown going down but the coming page is not shown during the animation.
In the template in App.vue
<template>
<div id="app">
<transition name="slide" mode="out-in">
<router-view></router-view>
</transition>
</div>
</template>
In the style tag,
.slide-enter {
}
.slide-enter-active {
animation: slide-in-coming 2s ease-out forwards;
}
.slide-leave {
}
.slide-leave-active {
animation: slide-in 2s ease-out forwards;
}
#keyframes slide-in {
from {
transform: translateY(0);
}
to {
transform: translateY(800px);
}
}
#keyframes slide-in-coming {
from {
transform: translateY(-800px);
}
to {
transform: translateY(0);
}
}
When I try to do a transition using the default "w-#" options in Tailwind, my transitions don't apply. When I hard code in my own classes for width, it works fine. Is there something weird with Tailwinds CSS and how it handles width that would cause this?
Here's the HTML text. The main part here is the dynamic class "sidebarWidth" which switches when the button is clicked. The transition-all, slowest and ease are all things I extended in Tailwind.
<nav class="text-white absolute md:relative flex-col min-h-full bg-black mt-24 md:mt-12 transition-all transition-slowest ease" :class="sidebarWidth">
Here's the JS code in the computed properties of the Vue component
sidebarWidth: function() {
if (this.$store.getters.isSidebarCollapsed) {
return "w-14 invisible md:visible";
} else {
return "w-64";
}
}
If I swap out w-14 and w-64 for the following classes, it works great.
<style scoped>
.width1 {
width: 100px;
}
.width2 {
width: 400px;
}
</style>
I basically want my sidebar nav to slide in when I click a button. In mobile, the sidebar nav is hidden and I want it to slide out. In the desktop, it should be a small nav and then slide out to a full screen nav. It works, but the slide transition doesn't work. Also, the margin change between mobile and desktop does animate properly.
You need to perform a few steps to activate the behaviour you are looking for.
The first one is about extending you Tailwind theme via tailwind.config.js. You need to add the transitionProperty for width.
module.exports = {
...
theme: {
...
extend: {
...
transitionProperty: {
'width': 'width'
},
},
},
}
The changes above create the transition-width class. Simply apply this one to your nav tag. In your specific case you can overwrite the transition-all class.
<nav class="text-white absolute md:relative flex-col min-h-full bg-black mt-24 md:mt-12 transition-width transition-slowest ease" :class="sidebarWidth">
The last step is quite easy: ensure that Tailwind is recreating the CSS. Afterwards you should see a smooth width transition in your project.
Background to the Problem
By default, the width and height transitions are not activated in Tailwind CSS. Here is the CSS that will be applied when using transition class.
transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
Like you can see width and height are missing in transition-property.
You can find more information about it in the Tailwind documentation.
You can make your own transition property like in tailwind.config.js :
Multiple properties :
module.exports = {
theme: {
extend: {
transitionProperty: {
multiple: "width , height , backgroundColor , border-radius"
}
}
}
One property :
module.exports = {
theme: {
extend: {
transitionProperty: {
width: "width"
}
}
}
I'm using a v-carousel with some images and I want the slides between the itens to be slower/smoother.
What would be an elegant way to do it?
<v-carousel interval="5000" :height="window.height - 48" hide-controls hide-delimiters>
<v-carousel-item :src="congresso">
</v-carousel-item>
<v-carousel-item :src="stf">
</v-carousel-item>
<v-carousel-item :src="tse">
</v-carousel-item>
</v-carousel>
I did that with the help of Vuetify’s transition helper function that lets you to define your own transition.
First if you did not add variables.scss file into your project you must do that with the help of this link from official documentation. Then you can add your own custom transition to that file. Here I used the original fade-transition of vuetify and only changed the transition time:
/* the variables.scss file */
.new-transition {
&-leave-active {
position: absolute;
}
&-enter-active, &-leave, &-leave-to {
transition: 100ms; /* here you can define your desired time for transition */
}
&-enter, &-leave-to {
opacity: 0
}
}
After that in your .vue file you can use createSimpleTransition of vuetify and register that in "mounted" hook as follow:
<template>
<section>
<v-carousel>
<v-carousel-item
v-for="(item,i) in items"
:key="i"
:src="item.src"
reverse-transition="new-transition"
transition="new-transition"
></v-carousel-item>
</v-carousel>
</section>
</template>
<script>
import { createSimpleTransition } from 'vuetify/lib/components/transitions/createTransition';
export default {
name: 'Carousel',
data () {
return {
items: [
{
src: 'https://cdn.vuetifyjs.com/images/carousel/squirrel.jpg',
},
{
src: 'https://cdn.vuetifyjs.com/images/carousel/sky.jpg',
},
{
src: 'https://cdn.vuetifyjs.com/images/carousel/bird.jpg',
},
{
src: 'https://cdn.vuetifyjs.com/images/carousel/planet.jpg',
},
],
}
},
mounted() {
const newTransition = createSimpleTransition('new-transition');
this.$once("hook:components", () => {
newTransition
})
}
}
</script>
Now you can use new-transition that were defined in your carousel and the time that you has set in variables.scss will affect in your carousel.
<b-carousel
id="carousel-1"
v-model="slide"
:interval="1000"
controls
indicators
background="#ababab"
img-width="1024"
img-height="480"
style="text-shadow: 1px 1px 2px #333;"
#sliding-start="onSlideStart"
#sliding-end="onSlideEnd"
>
I have just tried this and it works
interval is written like this :interval="nubmer" it has : so try to put that :
Add this to your variables.scss file:
.v-window {
&-x-transition,
&-x-reverse-transition,
&-y-transition,
&-y-reverse-transition {
&-enter-active,
&-leave-active {
transition: 1.1s cubic-bezier(0.25, 0.8, 0.5, 1) !important;
}
}
}
change the first param (here 1.1s) in the transition variable to set the overall speed.
*From https://github.com/vuetifyjs/vuetify/issues/7476
I have completed an installation of fontawesome in Nuxt with this fantastic link;
https://github.com/FortAwesome/vue-fontawesome
I have a spinner rendered as
<font-awesome-icon :icon="['fas','spinner']" />
The spinner does not spin, it is static.
I added fa-spin as
<font-awesome-icon :icon="['fas','spinner', 'spin']" />
This caused the error in the console Could not find one or more icon(s) undefined
Can anyone point me in the right direction, show me how to get my spinner spinning.
The relevant portion on the nuxt.config.js
modules: [
'nuxt-fontawesome'
],
//font-awesome
fontawesome: {
imports: [
{
set: '#fortawesome/free-solid-svg-icons',
icons: ['fas']
},
],
},
build: {
config.resolve.alias['#fortawesome/fontawesome-free-brands$'] = '#fortawesome/fontawesome-free-brands/shakable.es.js'
config.resolve.alias['#fortawesome/fontawesome-free-solid$'] = '#fortawesome/fontawesome-free-solid/shakable.es.js'
}
In the component("../pages/index.vue") it is;
<template>
<div>
<font-awesome-icon :icon="['fas','spinner','spin' ]" />
</div>
</template>
As suggested by #Steve, i have created a Glitch workspace
https://glitch.com/edit/#!/join/d57a5054-b448-4a53-ad37-d9465b0cef8b
You can add the spin directive.
<font-awesome-icon icon="spinner" spin />
Docs: https://github.com/FortAwesome/vue-fontawesome#basic
This works for me:
<template>
<div>
<font-awesome-icon icon="spinner" class="fa-spin" />
</div>
</template>
Font Awesome v.5, Vue.js v.2 (with #vue/cli 3)
Unless times have changed, Font Awesome does not provide out-of-the-box tools to animate their font and graphic libraries. They simply provide the service of offering single-colored, vector-graphic libraries formatted for various needs: true-type fonts (TTF), scalable vector graphics (SVG), etc.
You'll need to do the animation work yourself. Fortunately, it's very short work with CSS plus you'll get to control the speed of your spinner spinning.
/* Define an animation behavior */
#keyframes spinner {
to { transform: rotate(360deg); }
}
/* This is the class name given by the Font Awesome component when icon contains 'spinner' */
.fa-spinner {
/* Apply 'spinner' keyframes looping once every second (1s) */
animation: spinner 1s linear infinite;
}
I've updated the Glitch workspace you created (very helpful) with the additional CSS lines above to animate. Adjust accordingly and good luck!