过渡其实就是一个淡入淡出的效果

Vue 在插入、更新或者移除 DOM 时,提供多种不同方式的应用过渡效果

Vue 提供了内置的过渡封装组件,该组件用于包裹要实现过渡效果的组件

对于这些在过渡中切换的类名来说,如果你使用一个没有名字的 <transition>,则 v- 是这些类名的默认前缀。如果你使用了 <transition name="my-transition">,那么 v-enter 会替换为 my-transition-enter

 语法格式:

<transition name = "nameoftransition">
   <div></div>
</transition>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>webpack</title>
<script src="./js/vue.js"></script>
<style>
    .fade-enter-active, .fade-leave-active {
    /* opacity 透明度 */
    transition: opacity 1s
}
    /* .fade-leave-active, 2.1.8 版本以下 */
    .fade-enter, .fade-leave-to  {
        opacity: 0
    }
</style>
</head>
<body>
    <script src="./dist/bundle.js"></script>
   <div id="app">
       <button @click="isShow">点我</button>
    <!--   方法2  直接在按钮里取反 不写方法其他不变 -->
   <!-- <button @click="show=!show">切换</button> -->

       <transition name="fade">
            <h3 v-show="show">动画实例</h3>
       </transition>
   </div>

   <script>
       var app = new Vue ({
           el:"#app",
           data:{
                show:true
           },
           methods:{
               isShow(){
                   this.show = !this.show;
               }
           }
       })
   </script>
</body>
</html>

效果图:https://www.runoob.com/try/try.php?filename=vue2-transition

Logo

前往低代码交流专区

更多推荐