Vue.js使用animate.css框架

最新推荐文章于 2024-04-29 13:25:28 发布

曾皙

最新推荐文章于 2024-04-29 13:25:28 发布

阅读量676

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/qq_39148344/article/details/84205278

版权

vue 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

1.如何使用animate框架

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Vue中css动画的原理</title>
  <script src="script/vue.js"></script>
  <link rel="stylesheet" href="style/animate.css" />
</head>

<body>
  <div id="root">
      <!-- 必须要用自定义类这样的写法,这句话的意思是enter-active这个类重新定义为括号内的值 -->
    <transition enter-active-class="animated tada" leave-active-class="animated flash">
      <div v-if="show">hello world</div>
    </transition>
    <button @click="click">切换</button>
  </div>
  <script>
    var root = new Vue({
      el: '#root',
      data: {
        show: true
      },
      methods: {
        click: function () {
          this.show = !this.show;
        }
      }
    })
  </script>

</body>

</html>

当@keyframes和animate.css框架一起使用是时候

<div id="root">
  <!-- appear刚刚刷新成功 -->
  <!--有使用过渡又使用@keyframes中的animate.css框架-->
  <!--type="transition"规定时间选择为transition设置的时间为主-->
  <!--把type="transition"设置为：duration="10000"在经过10S后动画执行完-->
  <!--：duration={enter:5000,eaver:10000}设置出场和入场-->
  <transition 
    type="transition" 
    name="fade" 
    appear
    enter-active-class="animated swing fade-enter-active"
    leave-active-class="animated shake fade-leave-active" 
    appear-active-class="animated swing">
    <div v-if="show">hello world</div>
  </transition>
  <button @click="click">切换</button>
</div>
<script>
  var root = new Vue({
    el: '#root',
    data: {
      show: true
    },
    methods: {
      click: function () {
        this.show = !this.show;
      }
    }
  })
</script>

曾皙

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue.js使用animate.css框架

1.如何使用animate框架<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>Vue中css动画的原理</title> <script src="script/vue.js"></script> <li...
复制链接

扫一扫

专栏目录