【vue.js】用vue.js的transition元件結合css3的transitions屬性輕鬆實現過渡效果的小小小demo

阿新 • • 發佈：2019-01-16

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="vue.js"></script>
    <style>
        .box1{
            display:none;
        }
        .box2{
            background:pink;
            width:100px;
            height:100px;
            opacity:1;
            margin-left:0;
        }

        /*CSS3的transition屬性：
            當它進入過渡的時候（隱藏→顯示），就會依次發生：
                1. 新增.box-enter
                2.  刪除.box-enter，新增 .box-enter-active
                3.  刪除.box-enter-active

             當它離開過渡的時候（顯示→隱藏），就會依次發生：
                1. 新增.box-leave
                2. 刪除.box- leave，新增 .box- leave-active
                3. 刪除.box- leave -active
        */

        .box2-enter-active,.box2-leave-active{
            transition:all 0.8s;
        }
        .box2-enter{
            margin-left:100%;
            opacity:0;
        }
        .box2-leave{
            margin-left:0;
            opacity:1;
        }
        .box2-leave-active{
            margin-left:100%;
            opacity:0;
        }

    </style>
</head>
<body>
<div id="app">
    <button @click="showBox=!showBox;hideBox=!hideBox" class="btn">切換</button>
    <div class="container" style="width:100px;overflow:hidden;">

        <!--vue.js中的transition元件配合CSS3的動畫知識，輕鬆實現過渡效果
            注意CSS3的transition屬性與vue.js中的transition元件僅名字相同，是完全不同的東西-->
        <transition name="box2">
            <!--方法一：通過v-show指令控制顯示/隱藏-->
            <div class="box2" v-show="showBox">方法一</div>
        </transition>

        <!--方法二：動態新增class屬性控制顯示/隱藏-->
        <div :class="{'box1':hideBox}" style="background: #0A7EC3;width:100px;height:100px; margin-bottom:20px;">方法二</div>
    </div>
</div>
</body>
<script>
    let app=new Vue({
        el:"#app",
        data:{
            hideBox:true,
            showBox:false,
        },
    });
</script>
</html>

【vue.js】用vue.js的transition元件結合css3的transitions屬性輕鬆實現過渡效果的小小小demo

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title>

【vue.js】藉助vue-router實現切換檢視（元件）的demo

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" c

初學Vue.js，用 vue ui 建立專案會不會被鄙視

全棧的自我修養: 6使用vue ui進行vue.js環境搭建 > It is only with the heart that one can see rightly. What is essential is invisible to the eye. > 用心才能看得清事物的本質，真正重要的東西是肉

【乾貨分享】用AI工具設計一款吸引人的字型效果

乾貨又來啦！今天教大家如何使用AI工具設計一款引人注目的字型效果，話不多說，我們直接開始！ 1、在AI畫布中使用鋼筆工具勾勒出字母的線條，如圖所示 2、使用橢圓工具畫一個小的正圓，並填充藍色漸變。 3、我們再複製一個小圓，並填充紫色漸變，使用混合工具分別在

【vue.js】子元件的引數值不隨著父元件值的改變而改變

子元件 props['myDetail'] 父元件computed:{ detail(){ return this.$store.state.XXXX.yyyy } } <子元件 :myDe

【vue.js】入門

emp 寫到 logs 組件 images href one mooc 渲染慕課網視頻學習筆記：http://www.imooc.com/learn/694 1.將html、js、css寫到一個後綴名.vue的文件中，區分這三種類型是通過<template>、

【mock.js】後端不來過夜半，閑敲mock落燈花（附Vue + Vuex + mockjs的簡單demo）

fig org 表示 png borde var state 數據 and mock的由來【假】趙師秀：南宋時期的一位前端工程師詩詞背景：在一個梅雨紛紛的夜晚，正處於項目編碼階段，書童卻帶來消息：寫後端的李秀才在幾個時辰前就趕往臨安度假去了,！此時手頭僅

【laravel5.4+vue.js】laravel 循環三維數組，解決：htmlentities() expects parameter 1 to be string, array given

mode form BE 名稱 rule arr expect checkbox pre laravel循環三維數組 +++ vue.js循環三維數組（數據均是以三維數組形式存在的） <form-item

【vue】用vue-cli+bootstarp手動寫一個響應式的導航條

一、應用場景在很多時候，我們的網站都是要求設計成響應式也就是網站可以適應於 PC 端、平板和手機端關於響應式的設計網上有很多教程，大致分為兩種： 1.使用一套程式碼，利用媒體查詢來適配不同的螢幕 2.使用兩套程式碼，根據使用者的終端不同切載入不同的程式碼來適配兩種

【Vue.js】Vue官方文件學習-Vue例項

一、建立一個Vue例項 var vm = new Vue({ // 選項 }) 每個Vue應用程式都是通過Vue函式創建出一個新的Vue物件開始的。通常我們使用變數 vm (ViewModel 的簡稱) 來表示 Vue 例項。在建立一個 Vu

【Vue.js】Vue官方文件學習-介紹

一、Vue.js是什麼? Vue.js是一套構建使用者介面的漸進式框架。 Vue 從根本上採用最小成本、漸進增量的設計。 Vue 的核心庫只專注於檢視層。當與單檔案元件和 Vue 生態系統支援的庫結合使用時，Vue 也完全能夠為複雜的單頁應用程式提供有

【Vue.js】報錯：Elements in iteration expect to have ‘v-bind:key’ directives（vue/require-v-for-key）

寫在開篇，我使用的是webstore編輯器，如果你用的是VScode編輯器，請點選這個連結說明一：我沒有驗證過上述VScode版方案是否能解決此問題二：寫在開篇的原因是小編在解決這個問題的過程實在曲折，算是給大家排個雷吧正文開始

【vue.js】備忘錄demo

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" co

【VUE/JS】vue和js禁止瀏覽器頁面後退

屬性 flag 條件 set 存在都是判斷 java 很大的 1、vue 禁止瀏覽器後退需求是：需要某個路由不能通過瀏覽器返回，同時不影響相互之間的切換整理一下解決方法和使用方法： 1.在路由配置中給這個路由添加meta信息，比如: { path: ‘/home

一次基於Vue.Js的用戶體驗優化

cursor har class 點擊 words script vuejs 計算 point .mytitle { background: #2B6695; color: white; font-family: "微軟雅黑", "宋體", "黑體", Arial; fon

【JS】用checked實現複選框全選和全不選

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf8"> <title>無標題文件</title>

基於Vue.js的表格分頁元件

最近小熙在做Vue有關的專案需要前端分頁外掛，看到篇不錯的，特此轉載分享有一段時間沒更新文章了，主要是因為自己一直在忙著學習新的東西而忘記分享了，實在慚愧。這不，大半夜發文更一篇文章，分享一個自己編寫的一個Vue的小元件，名叫BootPage。不瞭解Vue.js的

Vue.js（5）- 全域性元件

全域性元件定義元件的語法 Vue.component('元件的名稱', { 元件的配置物件 }) 在元件的配置物件中：可以使用 template 屬性指定當前元件要渲染的模板結構；使用元件的語法把元件的名稱, 以標籤的形式，引入

Vue.js（10）- 兄弟元件共享資料

index.html: <div id="app"> <p>這是index.html</p> <my-gg></my-gg> <hr> <my-dd></my-dd>

【必看】認識Vue，Vue快速入門，Vue如何建立一個例項？Vue的生命週期，什麼是鉤子函式？

認識Vue Vue (讀音 /vjuː/，類似於 view) 是一套用於構建使用者介面的漸進式框架。與其它大型框架不同的是，Vue 被設計為可以自底向上逐層應用。Vue 的核心庫只關注檢視層，不僅易於上手，還便於與第三方庫或既有專案整合。另一方面，當與現代化的工具鏈以及各種支援類庫結合使

【vue.js】用vue.js的transition元件結合css3的transitions屬性輕鬆實現過渡效果的小小小demo

相關推薦