vue动画片

没有动画效果  显示有点生硬
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../vue.js"></script>
</head>
<body>
<div id="app">
  <button @click="flag=!flag">点我</button>
  <h3 v-if="flag">{{mes}}</h3>
</div>
</body>
<script>
    new Vue({
        el: "#app",
        data:{
            mes:"hello Vue",
            flag:false
        },
        methods:{

        }
    });
</script>
</html>
----------------------添加简单的淡入淡出动画和位移--------------------

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../vue.js"></script>
    <style>
        .v-enter, .v-leave-to {
            opacity: 0;
            transform: translateX(200px);
        }
        .v-enter-active,.v-leave-active{
          transition: all .4s ease-in;
        }
    </style>
</head>
<body>
<div id="app">
    <button @click="flag=!flag">点我</button>
    <transition>
        <h3 v-if="flag">{{mes}}</h3>
    </transition>

</div>
</body>
<script>
    new Vue({
        el: "#app",
        data: {
            mes: "hello Vue",
            flag: false
        },
        methods: {}
    });
</script>
</html>

------------------------自定义前缀动画-----定义那么属性即可----------------------
css

.my-enter, .my-leave-to {
    opacity: 0;
    transform: translateY(200px);
}
.my-enter-active,.my-leave-active{
    transition: all .4s ease-in;
}

html

<button @click="flag1=!flag1">点我</button>
<transition name="my">
    <h6 v-if="flag1">{{mes}}</h6>
</transition>

------------------------使用第三方类库实现动画----------------------

animate 可以放h3标签上 也可以

-------

----------------------------------------------钩子动画半场动画-------------------------------------------------------------------

动画的生命周期函数前四个入场后四个离场

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../vue.js"></script>
    <style>
        .box{
             100px;
            height: 100px;
            border-radius: 50%;
            background: red;
            text-align: center;
            line-height: 100px;
        }
        .btn{
            border: 1px solid #398dee;
            display: inline-block;
             108px;
            height: 34px;
            background-color: #398dee;
            border-radius: 3px;
            font-size: 12px;
            line-height: 34px;
            color: #fff;
            text-align: center;
            cursor: pointer;
        }
        :focus{
            outline: 0;
        }
        .gwc{
            position: fixed;
            left: 240px;
            bottom:70px;
             350px;
            height:150px ;
            background-image: url("gwc.jpg");
        }
    </style>
</head>
<body>
<div id="app">
    <button class="btn" @click="flag=!flag">加入购物车</button>
    <transition
      @before-enter="beforeEnter"
      @enter="enter"
      @after-enter="afterEnter">
        <div v-show="flag" class="box">iphone</div>
    </transition>
    <div class="gwc"></div>

</div>
</body>
<script>
    new Vue({
        el: "#app",
        data:{
            flag:false,
            mes:"hello Vue"
        },
        methods:{
            /*el代表操作的dom元素 元素js对象*/
            beforeEnter(el){
                /*beforeEnter 动画入场之前 此时动画尚未开始 可以在beforeEnter中设置元素开始动画之前的开始样式*/
                el.style.transform ="translate(0,-100px)";/*设置元素的起始位置*/
            },
            enter(el,done){
                /*这句话没有实际作用  不写不行  可以理解el.offsetWidth强制动画刷新*/
                el.offsetWidth
                /*enter 设置动画开始之后的样式 这里  可以设置小球完成动画之后的样式*/
                el.style.transform ="translate(350px,750px)";
                el.style.transition ="all 3s ease-in";

                done();/*done其实就是afterEnter 函数是afterEnter的应用*/
            },
            afterEnter(el){
                /*动画完成之后*/
               this.flag=!this.flag
            }
        }
    });
</script>
</html>

---------------------------------最后动画组介绍运行代码看看吧-------------------------------------

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../vue.js"></script>
    <style>
        ul li {
             500px;
            height: 50px;
            text-align: center;
            border: 1px solid #c0c0c0;
            line-height: 50px;
            text-decoration: none;
        }

        ul li:hover {
            background-color: #d0e9c6;
            transition: all .8s ease;
        }

        .input {
            padding: 5px;
            border-radius: 5px;
            border: 1px solid #c0c0c0;
        }

        .btn {
            border: 1px solid #398dee;
            display: inline-block;
             108px;
            height: 34px;
            background-color: #398dee;
            border-radius: 3px;
            font-size: 12px;
            line-height: 34px;
            color: #fff;
            text-align: center;
            cursor: pointer;
        }

        .v-enter, .v-leave-to {
            opacity: 0;
            transform: translateY(80px);
        }

        .v-enter-active, .v-leave-active {
            transition: all .6s ease;
        }

        /*下面的v-move  和 v-leave-active配合使用元素渐渐的票上来*/
        .v-move {
             transition: all 0.6s ease;
         }

        .v-leave-active {
              position: absolute;
          }
    </style>
</head>
<body>
<div id="app">
    名字:<input class="input" type="text" v-model="name"/>
    <button class="btn" @click="add">添加</button>
    <ul>
        <transition-group>
            <!--列表过度 for循环  不能使用transition包裹  需要使用 transition-group   key属性必须添加-->
            <li v-for="(item , i) in list" :key="item.id" @click="remove(i)">
                {{item,name}}
            </li>
        </transition-group>
    </ul>

</div>
</body>
<script>
    new Vue({
        el: "#app",
        data: {
            name: "",
            mes: "hello Vue",
            list: [{id:1,name:"阿基米德"},{id:2,name:"天下第一"},{id:3,name:"哈利波特"},{id:4,name:"哈利路亚"}]
        },
        methods: {
            add() {
                this.list.push(this.name);
                this.name = ""
            },
            remove(i) {
                this.list.splice(i, 1);

            }
        }
    });
</script>
</html>