Search the Community
Showing results for tags 'nexttick'.
Found 1 result
-
Hi all, Been trying to get a Vue with Tailwind implementation of the Flex Box example going for a couple of hours now but can't seem to make any headway on it. I must be missing something really simple but it just won't animate the flipping even though I'm just toggling 1 class. Any help would be greatly appreciated. Code is below. <template> <div class="flex w-screen h-screen group" @click="toggleDirection()" :class="{ 'flex-col' : col_mode }"> <div class="grid flex-1 text-5xl text-white bg-red-600 box place-items-center">1</div> <div class="grid flex-1 text-5xl text-white bg-blue-600 box place-items-center">2</div> <div class="grid flex-1 text-5xl text-white bg-green-600 box place-items-center">3</div> <div class="grid flex-1 text-5xl text-white bg-yellow-300 box place-items-center">4</div> </div> </template> <script> import gsap from 'gsap'; import { Flip } from "gsap/Flip"; export default { name: 'Home', data() { return { col_mode: false, state: null } }, mounted () { gsap.registerPlugin(Flip); }, methods: { toggleDirection() { this.state = Flip.getState('.group, .box'); this.col_mode = !this.col_mode Flip.to(this.state, { absolute: true, duration: 1, stagger: .2 }) } }, } </script>
