IT培训-高端面授IT培训机构
云和教育:云和数据集团高端IT职业教育品牌 全国咨询热线:0371-67988003
课程 请选择课程
    校区 请选择校区
      • 华为
        授权培训中心
      • 腾讯云
        一级认证培训中心
      • 百度营销大学
        豫陕深授权运营中心
      • Oracle甲骨文
        OAEP中心
      • Microsoft Azure
        微软云合作伙伴
      • Unity公司
        战略合作伙伴
      • 普华基础软件
        战略合作伙伴
      • 新开普(股票代码300248)
        旗下丹诚开普投资
      • 中国互联网百强企业锐之旗
        旗下锐旗资本投资

      content生成自定义图标的方式是什么?

      • 发布时间:
        2023-02-09
      • 版权所有:
        云和教育
      • 分享:

      animate.css是一个跨浏览器的CSS3动画库,它内置了很多经典的CSS3动画。使用起来很方便。下面我们通过例子讲解如何使用自定义类名和animate.css库实现动画效果。

      (1)从animate.css官方网站获取animate.css文件,保存到chapter04目录中。

      (2)创建C:\vue\chapter04\demo02.html文件,引入animate.css,如下所示:

      <link rel="stylesheet" href="animate.css">

      (3)在demo02.html文件中编写HTML结构,具体代码如下:

      <div id="app">
        <button @click="show=!show">显示/隐藏</button>
        <transition enter-active-class="animated bounceInLeft"
         leave-active-class="animated bounceOutLeft">
          <p v-if="show">过渡文字效果</div>
        </transition>
      </div>

      上述代码中,第3、4行给标签设置了enter-active-class与leave-active-class两个属性,用来自定义类名,属性值为animate.css动画库中定义好的类名。例如,第3行的“animated bounceInLeft”包含两个类名,animated是基本的类名,任何想实现动画的元素都要添加它;bounceInLeft是动画的类名,bounceInLeft表示入场动画,bounceOutLeft表示出场动画。

      (4)在demo02.html文件中编写JavaScript代码,具体代码如下:

      var vm = new Vue({ el: '#app', data: (show:true) })

      (5)保存代码,在浏览器中运行程序。单击“显示/隐藏”按钮,即可看到文字显示或隐藏的动画效果。