vue动画修改v-前缀

一、解释

修改v-前缀是为了实现不同的样式，即局部控制

 

二、代码

<style>
    .my-enter,
    .my-leave-to {
      opacity: 0;
      transform: translateY(70px);
    }
    .my-enter-active,
    .my-leave-active{
      transition: all 0.8s ease;
    }
  </style>
</head>
<body>
  <div id="app">
    <input type="button" value="toggle2" @click="flag2=!flag2">
    <transition name="my">
      <h6 v-if="flag2">这是一个H6</h6>
    </transition>
  </div>
  <script>
    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        flag2: false
      },
      methods: {}
    });
  </script>
</body>

 

posted @ 2019-11-14 11:39  碧果果  阅读(246)  评论(0)  编辑  收藏  举报