zoukankan      html  css  js  c++  java
  • 12.自定义v-过渡动画前缀

    代码:

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Document</title>
      <script src="./lib/vue-2.4.0.js"></script>
      <!-- 2. 自定义两组样式,来控制 transition 内部的元素实现动画 -->
      <style>
        /* v-enter 【这是一个时间点】 是进入之前,元素的起始状态,此时还没有开始进入 */
        /* v-leave-to 【这是一个时间点】 是动画离开之后,离开的终止状态,此时,元素 动画已经结束了 */
        .v-enter,
        .v-leave-to {
          opacity: 0;
          transform: translateX(150px);
        }
    
        /* v-enter-active 【入场动画的时间段】 */
        /* v-leave-active 【离场动画的时间段】 */
        .v-enter-active,
        .v-leave-active{
          transition: all 0.8s ease;
        }
    
        .my-enter,
        .my-leave-to {
          opacity: 0;
          transform: translateY(70px);
        }
    
        .my-enter-active,
        .my-leave-active{
          transition: all 0.8s ease;
        }
      </style>
    </head>
    
    <body>
      <div id="app">
        <input type="button" value="toggle" @click="flag=!flag">
        <!-- 需求: 点击按钮,让 h3 显示,再点击,让 h3 隐藏 -->
        <!-- 1. 使用 transition 元素,把 需要被动画控制的元素,包裹起来 -->
        <!-- transition 元素,是 Vue 官方提供的 -->
        <transition>
          <h3 v-if="flag">这是一个H3</h3>
        </transition>
    
        <hr>
        <input type="button" value="toggle2" @click="flag2=!flag2">
        <transition name="my">
          <h6 v-if="flag2">这是一个H6</h6>
        </transition>
      </div>
    
      <script>
        // 创建 Vue 实例,得到 ViewModel
        var vm = new Vue({
          el: '#app',
          data: {
            flag: false,
            flag2: false
          },
          methods: {}
        });
      </script>
    </body>
    </html>
  • 相关阅读:
    Leetcode 811. Subdomain Visit Count
    Leetcode 70. Climbing Stairs
    Leetcode 509. Fibonacci Number
    Leetcode 771. Jewels and Stones
    Leetcode 217. Contains Duplicate
    MYSQL安装第三步报错
    .net 开发WEB程序
    JDK版本问题
    打开ECLIPSE 报failed to load the jni shared library
    ANSI_NULLS SQL语句
  • 原文地址:https://www.cnblogs.com/yaboya/p/10259160.html
Copyright © 2011-2022 走看看