Vue JS: как загрузить анимацию CSS только на первой странице загрузки - PullRequest
Новая
       11

Vue JS: как загрузить анимацию CSS только на первой странице загрузки

0 голосов
/ 20 ноября 2018

В компоненте «Домашняя страница» есть элемент <div> с анимацией, например: 

<div class="square">
   //content
</div>

и в CSS: 

.square
height: 200px
width: 200px
margin: 0 auto
z-index: 0
position: absolute
top: 38vh
left: 43vw
margin-left:auto
margin-right:auto
animation-name: stretch
animation-duration: 0.3s
animation-timing-function: ease-out
animation-delay: 0
animation-direction: alternate
animation-fill-mode: forwards
animation-play-state: running

@keyframes stretch
from
  transform: scale (1)
to
  transform: scale(1.8)

Этопростой квадрат, который растет, с некоторыми другими <div> элементами внутри.

Теперь я хотел бы воспроизводить анимацию только при первом входе в систему и открытии приложения, а не каждый раз, когда появляется представление (как сейчас работает),

Не могли бы вы мне помочь?Пожалуйста, не принимайте ничего как должное, потому что я новичок.Заранее спасибо.

Ответы [ 2 ]

0 голосов
/ 31 июля 2019

Я предполагаю, что вы работаете над проектом, используя Vue CLI & Single File Components. Вы можете создать желаемый эффект, выполнив следующие действия:

  • Создайте компонент для анимации.Допустим, вы создаете компонент:

    SquareAnimation.vue

  • Импортируйте компонент в Компонент домашней страницы (или в компоненте, где остальныеСодержимое вашего приложения находится так):

    import SquareAnimation from "./SquareAnimation"

  • Не забудьте добавить компонент в Vue Instance likeИтак: 

        export default {
      name: "HomePage",
      // Imported components
      components: {
          SquareAnimation,
      },
    }

  • Добавьте свойство данных loading: true к компоненту Домашней страницы примерно так: 

        data() {
        return {
          // we'll use the "loading" property to toggle the pre-loader Square Animation
          loading: true, 
        };
    },

  • В верхней части компонента файла домашней страницы добавьте компонент SquareAnimation.vue следующим образом: 

        <!-- Square Animation component will show while property loading = true -->
    <SquareAnimation v-if="loading" />

    <div v-else>
      <!-- Here goes the rest of your app's content -->
    </div>

  • Теперь анимация должна отображаться всегда, потому что loading:true свойство оценивается как истинное все время.Мы создадим метод для переключения свойства loading на false следующим образом: 

        methods: {
        // function to make preloader spinner for 1500 miliseconds
        preloaderAnimation() {
          // Sets the "loading" property to false after 1.5 seconds
          setTimeout(() => {
            this.loading = false; 
          }, 1500); // You can change the number to control animation's timer
        },
    },

Если вы правильно выполнили шаги, ваша квадратная анимация должна работать при загрузке страницыза 1,5 секунды до того, как остальное содержимое приложения отобразится на странице.Надеюсь, это поможет!

Удачного кодирования!

0 голосов
/ 21 ноября 2018

это просто.создать флаг в данных свойства vue.Вы можете назвать это animate.добавьте функцию, которая отключит ее после входа в систему, например: 

data:{
   animate:true
   },
methods:{
   turnOffAnimate:{
      this.animate=false;
   }
}

, вызывайте this.turnOffAnimate, если вы хотите отключить анимацию.теперь в html div свяжите класс следующим образом: 

<div :class="{square : animate}">
   //content
</div>

это условие означает, что вашему div будет принадлежать только класс square, в то время как флаг animate имеет значение true.Вы можете прочитать больше о привязке класса в vue .

...