zoukankan      html  css  js  c++  java
  • Vue11 -- 过渡与动画

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            <style type="text/css">
                 /*显示/隐藏过渡效果*/
                .xxx-enter-active, .xxx-leave-active {
                  transition: opacity .5s;
                }
                /*隐藏时的样式*/
                .xxx-enter, .xxx-leave-to /* .fade-leave-active below version 2.1.8 */ {
                  opacity: 0;
                }
                
                /*********************************************************************************************/
                /*显示过渡效果*/
                .move-enter-active{
                    transition: all  1s;
                }
                /*隐藏过渡效果*/
                .move-leave-active{
                    transition: all  3s;
                }
                /*隐藏时的样式*/
                .move-enter, .move-leave-to /* .fade-leave-active below version 2.1.8 */ {
                  opacity: 0;
                  transform: translateX(20px);
                }
                /*********************************************************************************************/
                .xxxxx-enter-active {
                  animation: bounce-in .5s;
                }
                .xxxxx-leave-active {
                  animation: bounce-in .5s reverse;
                }
                @keyframes bounce-in {
                  0% {
                    transform: scale(0);
                  }
                  50% {
                    transform: scale(1.5);
                  }
                  100% {
                    transform: scale(1);
                  }
                }
            </style>
        </head>
        <body>
            <div id="app">
                <button @click="IsShow = !IsShow">toggle</button>
                <transition  name='xxx'>
                    <p v-show="IsShow">hello</p>
                </transition >
                
            </div>
            
            <div id="app2">
                <button @click="IsShow = !IsShow">toggle</button>
                <transition  name='move'>
                    <p v-show="IsShow">hello</p>
                </transition >
                
            </div>
            
            <div id="app3">
                <button @click="IsShow = !IsShow">toggle</button>
                <br />
                <transition  name='xxxxx'>
                    <p v-show="IsShow" style="background: red;display: inline-block;">hello</p>
                </transition >
                
            </div>
            
            <script src="https://vuejs.org/js/vue.js"></script>
            <script type="text/javascript">
                var app = new Vue({
                    el:'#app',
                    data(){
                        return{
                            IsShow:true
                        }
                    }
                })
                
                var app2 = new Vue({
                    el:'#app2',
                    data(){
                        return{
                            IsShow:true
                        }
                    }
                })
                
                var app3 = new Vue({
                    el:'#app3',
                    data(){
                        return{
                            IsShow:true
                        }
                    }
                })
            </script>
        </body>
    </html>
  • 相关阅读:
    Java中class的前面添加public和不添加public有什么区别?
    java中构造函数和一般函数的区别
    Java里的new
    【Python】正则表达式
    【Java】仿真qq尝试:用户注册(二)
    【Java】流与文件(端口 & 文件读写对象)
    【Java】仿真qq尝试:用户注册(一)
    【Java】仿真qq尝试:聊天界面 && 响应用户输入
    【JavaScript】canvas实现一个小游戏
    【JavaScript】键盘控制小球
  • 原文地址:https://www.cnblogs.com/lee-xingxing/p/11216610.html
Copyright © 2011-2022 走看看