zoukankan      html  css  js  c++  java
  • Vue内置过渡动画-常用的类名

    1.fade 淡入淡出

    <transition name="el-fade-in-linear">
       <div v-show="show" class="transition-box">.el-fade-in-linear</div>
    </transition>
    <transition name="el-fade-in">
       <div v-show="show" class="transition-box">.el-fade-in</div>
    </transition>

    常用:el-fade-in-linear  和   el-fade-in

    2.zoom 缩放

    <transition name="el-zoom-in-center">
       <div v-show="show2" class="transition-box">.el-zoom-in-center</div>
    </transition>
     
    <transition name="el-zoom-in-top">
       <div v-show="show2" class="transition-box">.el-zoom-in-top</div>
    </transition>
     
    <transition name="el-zoom-in-bottom">
       <div v-show="show2" class="transition-box">.el-zoom-in-bottom</div>
    </transition>

    常用:1. el-zoom-in-center        2. el-zoom-in-top         3. el-zoom-in-bottom

    3.collapse展开折叠

    <template>
      <div>
        <el-button @click="show3 = !show3">Click Me</el-button>
    
        <div style="margin-top: 20px; height: 200px;">
          <el-collapse-transition>
            <div v-show="show3">
              <div class="transition-box">el-collapse-transition</div>
              <div class="transition-box">el-collapse-transition</div>
            </div>
          </el-collapse-transition>
        </div>
      </div>
    </template>
    
    <script>
        export default {
        data: () => ({
          show3: true
        })
      }
    </script>
    
    <style>
      .transition-box {
        margin-bottom: 10px;
        width: 200px;
        height: 100px;
        border-radius: 4px;
        background-color: #409EFF;
        text-align: center;
        color: #fff;
        padding: 40px 20px;
        box-sizing: border-box;
        margin-right: 20px;
      }
    </style>

    常用:el-collapse-transition组件

    使用引入方法:

    // fade/zoom 等
    import 'element-ui/lib/theme-chalk/base.css';
    // collapse 展开折叠
    import CollapseTransition from 'element-ui/lib/transitions/collapse-transition';
    import Vue from 'vue'
    
    Vue.component(CollapseTransition.name, CollapseTransition)
  • 相关阅读:
    122. Best Time to Buy and Sell Stock II
    121. Best Time to Buy and Sell Stock
    72. Edit Distance
    583. Delete Operation for Two Strings
    582. Kill Process
    indexDB基本用法
    浏览器的渲染原理
    js实现txt/excel文件下载
    git 常用命令
    nginx进入 配置目录时
  • 原文地址:https://www.cnblogs.com/xinci/p/10446494.html
Copyright © 2011-2022 走看看