zoukankan      html  css  js  c++  java
  • vue动画进入-完整的动画/有进入离开

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <script src="../vue.js"></script>
        <style>
            /* 
            v-enter       这是进入之前;元素的起始状态;此时还没有开始进入
            v-leave-to   是动画离开之后;离开的终止状态;此时元素的动画已经结束
    
            .v-enter-active  入场动画的时间段  
            .v-leave-active   离场动画的时间段
            */
            h3 {
                 200px;
            }
            .v-enter,
            .v-leave-to {
                opacity: 0.8;
                /* 说明起始状态是在右侧80px处的 */
                transform: translateX(200px);
            }
    
            .v-enter-active,
            .v-leave-active {
                transition: all 0.6s ease;
            }
        </style>
    </head>
    
    <body>
        <div id="app">
            <input type="button" value="toggle" @click="toggle">
    
            <transition>
                <!-- transition是vue官方提供的  使用transition元素 把需要被动画控制的元素  包裹起来哦 -->
                <h3 v-show="flag">这是内容</h3>
            </transition>
        </div>
        <script>
            var vm = new Vue({
                el: "#app",
                data: {
                    flag: false
                },
                methods: {
                    toggle() {
                        this.flag = !this.flag;
                    }
                },
            })
        </script>
    </body>
    
    </html>
    
        <style>
           /* v-enter   这是进入之前  元素的起始状态   此时还没有开始进入
              v-leave-to   是动画离开之后  离开的终止状态   此时 元素的动画已经结束
    
             .v-enter-active  入场动画的时间段 
             .v-leave-active离场动画的时间段
            */
            .my-enter,.my-leave-to{
                opacity: 0;
                transform: translateY(80px);
            }
    
             .my-enter-active,.my-leave-active{
                 transition: all 0.6s ease;
             }
        </style>
        
    <div id="app">
       <input type="button" value="toggle2" @click="toggle">
       <transition name="my">  <!--  这就是自定义的前缀名称   表示my开发实现自定义的动画-->
          <!-- transition是vue官方提供的  使用transition元素 把需要被动画控制的元素  包裹起来哦 -->
          <h3 v-if="flag2">这是内容</h3>
       </transition>
    </div> 
    <script>
       var vm=new Vue({
           el:"#app",
           data:{
             flag:false,
             flag2:false
           },
           methods: {
            toggle(){
                this.flag2=!this.flag2;
            }
           },
       })
    </script>
    
    

  • 相关阅读:
    2019 Multi-University Training Contest 4
    AC自动机
    trie
    Contest1802
    蓝桥杯-某电视台举办了低碳生活大奖赛
    蓝桥杯-有一群海盗(不多于20人),在船上比拼酒量
    蓝桥杯-福尔摩斯到某古堡探险
    蓝桥杯-标题:字符串比较
    蓝桥杯-题目:猜算式
    蓝桥杯-标题:算年龄
  • 原文地址:https://www.cnblogs.com/IwishIcould/p/14226891.html
Copyright © 2011-2022 走看看