关于vue css过渡,完整代码

一、Vue css过渡的基本语法

<div v-if="show" :transition="expand">hello</div>

然后为 .expand-transition.expand-enter 和 .expand-leave 添加 CSS

/* 必需 */
.expand-transition {
  transition: all .3s ease;
  height: 30px;
  padding: 10px;
  background-color: #eee;
  overflow: hidden;
}

/* .expand-enter 定义进入的开始状态 */
/* .expand-leave 定义离开的结束状态 */
.expand-enter, .expand-leave {
  height: 0;
  padding: 0 10px;
  opacity: 0;
}

你可以在同一元素上通过动态绑定实现不同的过渡:

<div v-if="show" :transition="transitionName">hello</div>
new Vue({
  el: '...',
  data: {
    show: false,
    transitionName: 'fade'
  }
})

二、例子

1、例子1

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
    <title>vue</title>
    <script src="vue.js"></script>
</head>
<body>
  <div id="app">
    <div v-if="show" :transition="transitionName">hello</div>
    <button v-on:click="change">toggle</button>
  </div>
  <style type="text/css">
    .fade-transition {
        transition: all .3s ease;
        height: 30px;
        padding: 10px;
        background-color: #eee;
        overflow: hidden;
    }

    /* .expand-enter 定义进入的开始状态 */
    /* .expand-leave 定义离开的结束状态 */
    .fade-enter, .fade-leave {
        height: 0;
        padding: 0 10px;
        opacity: 0;
    }
  </style>
  <script>
    var vm=new Vue({
        el: '#app',
        data: {
            show: true,
            transitionName:"fade"
        },
        methods:{
            change:function(){
                this.show?this.show=false:this.show=true;

            }
        }
    })

    Vue.transition('fade', {
      beforeEnter: function (el) {
        el.textContent = 'beforeEnter'
      },
      enter: function (el) {
        el.textContent = 'enter'
      },
      afterEnter: function (el) {
        el.textContent = 'afterEnter'
      },
      enterCancelled: function (el) {
        // handle cancellation
      },

      beforeLeave: function (el) {
        el.textContent = 'beforeLeave'
      },
      leave: function (el) {
        el.textContent = 'leave'
      },
      afterLeave: function (el) {
        el.textContent = 'afterLeave'
      },
      leaveCancelled: function (el) {
        // handle cancellation
      }
    })
  </script>
</body>

效果

点击前

点击后的

2、例子2,css动画

</html>
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
    <title>vue</title>
    <script src="vue.js"></script>
</head>
<body>
    <div id="app">
        <span v-show="show" transition="bounce">Look at me!</span><br>
        <button @click="change">toggle</button>
    </div>
    <style type="text/css">
        .bounce-transition{
            display: inline-block;
        }
        .bounce-enter{
            animation: bounce-in 5s;
        }
        .bounce-leave{
            animation: bounce-out 5s;
        }
        @keyframes bounce-in{
            0%{
                transform: scale(0);
            }
            50%{
                transform: scale(1.5);
            }
            100%{
                transform: scale(1);
            }
        }
        @keyframes bounce-out{
            0%{
                transform: scale(1);
            }
            50%{
                transform: scale(1.5);
            }
            100%{
                transform: scale(0);
            }
        }
        }
    </style>
    <script>
        var vm=new Vue({
            el: '#app',
            data: {
                show: true,
                transitionName:"fade"
            },
            methods:{
                change:function(){
                    this.show?this.show=false:this.show=true;

                }
            }
        })

    </script>
</body>

</html>

3、例子3渐近过渡

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
    <title>vue</title>
    <script src="vue.js"></script>
</head>
<body>
    <div id="app">
    <input v-model="jq">
        <ul>
            <li v-for="item in list|filterBy jq" transition="staggered" stagger="100">
                {{item.text}}
            </li>
        </ul>
    </div>
    <style type="text/css">
        ul {
    padding-left: 0;
    font-family: Helvetica, Arial, sans-serif;
}
.staggered-transition {
    transition: all .5s ease;
    overflow: hidden;
    margin: 0;
    height: 20px;
}
.staggered-enter, .staggered-leave {
    opacity: 0;
    height: 0;
}
    </style>
    <script>
        var vm=new Vue({
            el: '#app',
            data: {
                jq:"",
                list:[
                    {text:"Bruce Lee"},
                    {text:"Jackie Chan"},
                    {text:"Chuck Norris"},
                    {text:"Jet Li"},
                    {text:"Kung Fury"}
                ]
            },
        })
        Vue.transition("stagger",{
            stagger:function(index){
                 // 每个过渡项目增加 50ms 延时
              // 但是最大延时限制为 300ms
                return Math.min(300,index*50)
            }
        })
    </script>
</body>

</html>

 

posted @ 2016-08-22 14:29  taryn  阅读(4203)  评论(0编辑  收藏  举报