Question

我有一个按钮列表，我想使用@click="play"触发不同的功能来控制时间轴。

这是我目前的代码：

问题是我在data（）中调用了我的函数，他们无法引用mounted:中创建的时间轴

<template>
  <div class="container">
    <QuestionCard />
    <ul class="buttons">
      <button @click="playTimline()" id="btnPlay">play</button>
      <button id="btnPause">pause</button>
      <button id="btnResume">resume</button>
      <button id="btnReverse">reverse</button>
      <button id="btnSpeedUp">speed Up</button>
      <button id="btnSlowDown">slow down</button>
      <button id="btnSeek">seek 1 sec</button>
      <button id="btnProgress">go to 50%</button>
      <button id="btnRestart">restart</button>
    </ul>
  </div>
</template>

<style lang="stylus">
.container 
  display flex
  justify-content center 
  align-items center
  height 100vh
  flex-direction column 

  font-family: 'Avenir', Helvetica, Arial, sans-serif
  -webkit-font-smoothing: antialiased
  -moz-osx-font-smoothing: grayscale

</style>


<script>
import QuestionCard from '../components/Layout/QuestionCard/index.vue'
import { TweenMax } from 'gsap'

export default {
  mounted: function () {
    const tl = new TimelineLite()
    const logo = document.getElementsByClassName('header')
    const question = document.getElementsByClassName('question-title')
    const description = document.getElementsByClassName('question-subtitle')
    const button = document.getElementsByClassName('answer-button')
    tl
      .from(logo, 0.3, {
        y: -15,
        autoAlpha: 0,
        ease: Back.easeOut
      },
      '-=0.10')
      .from(question, 0.3, {
        y: -15,
        autoAlpha: 0,
        ease: Back.easeOut
      },
      '-=0.10')
      .from(description, 0.3, {
        y: -15,
        autoAlpha: 0,
        ease: Back.easeOut
      },
      '-=0.10')
      .from(button, 0.3, {
        y: -15,
        autoAlpha: 0,
        ease: Back.easeOut
      },
      '-=0.10')
    tl.pause()
    // TweenMax.from(hello, 1, {
    //   y: 200
    // })
  },
  data () {
    return {
      tl: new TimelineLite(),
      playTimline: function () {
        console.log('hello world')
        this.tl.play()
      }
    }
  },
  components: {
    QuestionCard
  }
}
</script>

Answer 1

我知道这是一个老问题，但这是我的答案。

如果在data（）中定义它，则只需在mount中引用它即可，因为它将可用。这里还有其他几个问题：

$(document).ready(function() { localStorage.clear(); //clear previous data on page load $('#countryFlags').ddslick({ width: 150, selectText: 'Select your preferred social network', imagePosition: 'left', defaultSelectedIndex: null, onSelected: function(selectedData) { if (selectedData.selectedData.value) { console.log(selectedData.selectedData.value); checking(selectedData.selectedData.value); //call function } } }); function checking(value) { //if there is no value in localStorage if (localStorage.getItem("save") == null) { //don't redirect console.log("i am in don't redirect") var save = "firsttime"; console.log(save); localStorage.setItem("save", save); //add data to storage } else { console.log("i am in redirect"); //redirect window.location.href = 'mysite.com/advert-location/' + value; } } })上的playTimline函数实际上应该写在data()属性内。
由于SSR和Nuxt / Vue渲染引擎的工作方式，您不应使用methods获取DOM引用。您应该在元素上使用'ref'属性，并通过document.getElementsByClassName访问它。

（带有GSAP版本3的代码）

this.$refs.[attributename]

在vue / nuxt中定义gsap的时间轴的位置？

1 个答案: