• vue 同时使用过渡和动画


     1 <!DOCTYPE html>
     2 <html>
     3     <head>
     4         <meta charset="UTF-8">
     5         <title>Vue中的动画</title>    
     6         <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/animate.css@3.5.2/animate.min.css">
     7         <style>
     8             .fade-enter,
     9             .fade-leave-to {
    10                 opacity: 0;
    11             }
    12             .fade-enter-active,
    13             .fade-leave-active {
    14                 transition: opacity 3s;
    15             }
    16         </style>
    17     </head>
    18     <body>    
    19         <div id="app">
    20             <!--1.设置appear  appear-active-class设置页面初次打开时的动画
    21                 2.animated的动画时长为1s, 过渡时长为3s, 
    22                 在transition标签里设置type="transition"则以transition的时间为准
    23                 3.或者时长自定义:在transition标签设置:duration='10000',动画时长即为10s,
    24                 enter和leave时间可以分开设置:duration='{enter: 5000, leave: 10000}'
    25             -->
    26             <transition 
    27                 name="fade"
    28                 appear 
    29                 :duration='10000'
    30                 enter-active-class="animated swing"
    31                 leave-active-class="animated shake"
    32                 appear-active-class="animated swing">
    33                 <div v-if="show">hello world</div>
    34             </transition>
    35             <button @click="handleBtnClick">change</button>
    36         </div>
    37         
    38         
    39         <!-- 开发环境版本,包含了用帮助的命令行警告 -->
    40         <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    41         <script type="text/javascript">
    42             
    43             var app = new Vue({
    44                 el: '#app',
    45                 data: {
    46                     show: true
    47                 },
    48                 methods: {
    49                     handleBtnClick: function() {
    50                         this.show = !this.show;
    51                     }
    52                 }
    53             })
    54             
    55         </script>
    56     </body>
    57 </html>
  • 相关阅读:
    二分题目
    求最小公倍数的最简模板
    用 vue 脚手架 vue-cli 初始化(新建)项目
    电脑没有声音
    node.js 安装步骤
    phpStrom编辑器 通过 git 提交代码到 gitlab
    jq 实现头像(气泡式浮动)
    微信网页授权 、获取用户昵称 头像等信息
    秒格式化 “秒” 为 天 时 分 秒
    改变swiper 按钮swiper-button-next 颜色
  • 原文地址:https://www.cnblogs.com/1032473245jing/p/9041776.html
Copyright © 2020-2023  润新知