vue-过渡效果（transition过渡组件）_vue transition transition组件的mode属性

作者：羊村懒王 | 2024-04-05 05:53:15

踩

vue transition transition组件的mode属性

借用animate.css添加类名
使用transition包裹过渡组件
动画：
    enter-active-class = "animated xxxx类名" ---- 进入
    leave-active-class = "animated xxxx类名"  ---- 离开
    mode：
       - 新元素先进行过渡，完成后当前元素过渡离开   --- in-out
       - 当前元素先进行过渡，完成之后新元素过渡进入   --- out-in
1
2
3
4
5
6
7
8

<link href="https://cdn.bootcss.com/animate.css/3.7.2/animate.min.css" rel="stylesheet">
  <style>
    p{
      width: 100px;
      height: 100px;
      background: red;
    }
  </style>
</head>
<body>
  <div id="app">
    <button @click = "changeFlag"> changeFlag </button>
    <!-- mode  有两个值   in-out    out-in  -->
    <transition
      name = "xige"
      mode = "in-out"
      enter-active-class = "animated fadeIn"
      leave-active-class = "animated fadeOut"
    >
      <p v-if = "flag"></p>
    </transition>
  </div>
</body>
<script src="../../../lib/vue.js"></script>
<script>
  new Vue({
    el: '#app',
    data: {
      flag: true 
    },
    methods: {
      changeFlag () {
        this.flag = !this.flag 
      }
    }
  })
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/羊村懒王/article/detail/363747