vue+jquery实现文字淡入效果

最新推荐文章于 2023-08-02 11:34:08 发布

W_Venus

最新推荐文章于 2023-08-02 11:34:08 发布

阅读量546

点赞数 1

分类专栏：动效文章标签： vue.js jquery

本文链接：https://blog.csdn.net/W_Venus/article/details/103617853

版权

动效专栏收录该内容

2 篇文章 0 订阅

订阅专栏

(vue+jquery实现文字淡入效果)

直接上代码啦

<template>
  <div class="wrap">
    <div class="details-1">我是张小雨</div>
    <div class="details-2">
      2019年4月23日这天，我登陆了一个神奇的星球——樊登小读者
    </div>
    <div class="details-3">
      这里除了书还有故事和游戏，据说爸爸妈妈来了都会喜欢和我一起读书
    </div>
    <div class="details-4">于是，我成为了她的第167324成员</div>
  </div>
</template>

<script>
import $ from 'jquery'
export default {
  name: 'app',
  data () {
    return {}
  },
  components: {},
  created () {
  },
  mounted () {
    $('.details-1')
      .animate({ opacity: 1 }, 1000)
      .next('.details-2')
      .animate({ opacity: 1 }, 3000)
      .next('.details-3')
      .animate({ opacity: 1 }, 5000)
      .next('.details-4')
      .animate({ opacity: 1 }, 7000)
  },
  methods: {}
}
</script>

<style lang="less" scoped>
.details-1,
.details-2,
.details-3,
.details-4 {
  opacity: 0;
}
</style>