vue_在vue中同时使用过渡和动画 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/animate.css/3.7.2/animate.min.css">
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <style type="text/css">
  /*自己的动画*/
  .fade-enter,
  .fade-leave-to {
    opacity: 0;
  }

  .fade-enter-active,
  .fade-leave-active {
    transition: opacity 1s
  }
  </style>
</head>
<body>
  <div id="app">
    <h3>同时使用过渡和动画</h3>
    <!-- 初始渲染过渡(页面刷新的时候就使用动画)添加appear和appear-active-class -->
    <!-- 
    animated库使用的animate动画过渡，自定义的动画是使用transition过渡 
    在一些场景中，你需要给同一个元素同时设置两种过渡动效，
    比如 animation 很快的被触发并完成了，而 transition 效果还没结束。
    在这种情况中，你就需要使用 type attribute 并设置 animation 或 transition 来明确声明你需要 Vue 监听的类型。
    在transtion标签添加type="transition" 同时使用2中动画是使用transition的过渡动画时长
    
    自定义动画的过渡时长，也添加duration="1000" 表示过渡动画时长为1秒
    :duration="{enter: 2000,leave=1000}" 进场动画2秒，出场动画1秒
    -->
    <transition 
      name="fade"
      appear
      :duration="{enter: 2000,leave=1000}"
      enter-active-class="animated swing fade-enter-active" 
      leave-active-class="animated shake fade-leave-active"
      appear-active-class="animated swing"
    >
      <h2 v-if="show">hello world</h2>
    </transition>
    <button @click="handleClick">切换</button>
  </div>
</body>
<script type="text/javascript">

  let vm = new Vue({
    el: '#app',
    data: {
      show: true
    },
    methods: {
      handleClick () {
        this.show = !this.show
      }
    }
  })
</script>
</html>

 

posted @ 2020-03-10 15:22  前端之旅  阅读(496)  评论(0)    收藏  举报