vue笔记-09（vue过渡和动画）

2020-09-16 本文已影响0人 7ColorLotus

过渡动画入门

导入包animate.min.css
设置动画的样式
1）过度的类名：v-enter-active 和 v-leave-active
2） v-enter-active ：进入包括 v-enter和v-enter-to
3）v-leave-active ：离开包括 v-leave和v-leave-to
将动画内容放入<transition>标签中

过渡动画入门演示：点击按钮，让h3现实，再点击，让h3隐藏
1）使用transition元素，是官方提供的
2）自定义两组样式，来控制transition内部的元素实现动画

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vue动画</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css">
<style>  
   /* v-enter 【这是一个时间点】 是进入之前，元素的起始状态，此时还没有开始进入 */
   /* v-leave-to 【这是一个时间点】 是离开之后，离开的终止状态，此时，元素动画已经结束 */
   .v-eneter,
   .v-leave-to{
       opacity: 0;
       transform: tanslateX(100px)
   }

   /* v-enter-active 入场动画的时间段 */
   /* v-leave-active 离场动画的时间段 */
   .v-enter-active,
   .v-leave-active{
       transition: all 0.8s ease;
   }
</style>
</head>
<body>
<div id="app">
   <input type="button" value="toggle" v-on:click="flag = !flag">

    <transition>
        <h3 v-if="flag">这是一个H3</h3>
    </transition>
</div>
<script>
   var vm = new Vue({
       el: "#app",
       data: {
           flag: false
       }
   })
</script>
</body>
</html>

vue笔记-09（vue过渡和动画）

过渡动画入门

猜你喜欢

热点阅读