Jump to content
Search Community

takuan

Members
  • Posts

    1
  • Joined

  • Last visited

Posts posted by takuan

  1. Another way to get the element is on the event passed to the click handler:

     

    <template>
      <section class="container">
        <div class="row">
          <div class="col-12">
            <div class="card" v-for="card in cards" :key="card.id" @click="simpleFade">
              <div class="card-inner">
                <div class="card-name">{{ card.name }}</div>
              </div>
            </div>
          </div>
        </div>
      </section>
    </template>
    
    <script>
      import { gsap } from 'gsap';
      import { CSSPlugin } from 'gsap/CSSPlugin'
      gsap.registerPlugin(CSSPlugin);
    
      const myCards = [
        {
          id: 0,
          name: 'Prima carta',
        },
        {
          id: 1,
          name: 'Seconda carta',
        },
        {
          id: 2,
          name: 'Terza carta',
        },
        {
          id: 3,
          name: 'Quarta carta',
        }
      ];
    
      export default {
        name: 'TarocchiCards',
        data() {
          return {
            cards: myCards,
          };
        },
        methods: {
          simpleFade(event){
            gsap.fromTo(event.target, {autoAlpha:1},{autoAlpha:0, duration: 0.35});
          }
        },
      }
    </script>

    Notice the parens are removed in the @click in the template. If you need to pass another variable, I think you need to pass the event parameter explicitly.

×
×
  • Create New...