第五章动画 43：动画-使用过渡类名实现动画

最新推荐文章于 2024-09-11 15:33:18 发布

weixin_30933531

最新推荐文章于 2024-09-11 15:33:18 发布

阅读量90

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/songsongblue/p/10996676.html

版权

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4   <head>
 5     <meta charset="utf-8">
 6     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7     <meta http-equiv="X-UA-Compatible"  content="ie=edge">
 8     <title>Document</title>
 9     <!--1.导入Vue的包-->
10     <script src=" https://cdn.jsdelivr.net/npm/vue"></script>   
11     <!-- 2.自定义两组样式，来控制transition内部的元素实现动画 -->
12     <style>
13     /*v-enter 【这是一个时间点】是进入之前，元素的起始状态，此时还没有开始进入*/
14     /*v-leave-to 【这是一个时间点】 是动画离开之后，离开的终止状态，此时，元素动画已经结束了*/
15       .v-enter,
16       .v-leave-to{
17         opacity: 0;
18         transform: translateX(150px);
19       }
20       /*v-enter-active【入场动画的时间段】*/
21       /*v-leave-active 【离场动画的时间段】*/
22       .v-enter-active,
23       .v-leave-active{
24         transition: all 0.8s ease;
25       }
26     </style>
27   </head>
28 
29   <body>
30       <div id="app">
31       <input type="button" value="toggle"  @click="flag=!flag">
32      <!--  需求：点击按钮，让h3显示，再点击，让h3隐藏 -->
33       <!-- 1.使用transition元素，把需要被动画控制的元素，包裹起来 -->
34       <!-- transition元素，是Vue官方提供的 -->
35        <transition>
36          <h3 v-if="flag">这是一个H3</h3>
37        </transition>
38       </div>
39 
40 
41       <script>
42           //创建 Vue 实例，得到 ViewModel
43           var vm =  new Vue({
44               el:'#app',
45         data:{
46           flag:false
47         },
48         methods:{}
49           });
50       </script>
51   </body>
52 </html>

转载于:https://www.cnblogs.com/songsongblue/p/10996676.html

weixin_30933531

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
第五章动画 43：动画-使用过渡类名实现动画

1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="utf-8"> 6 <meta name="viewport" content="width=device-width,initial-scale=1....
复制链接

扫一扫