首页 > TAG信息列表 > fade

vue源码阅读—13—扩展之transition

    <style> .fade-enter-active, .fade-leave-active { transition: opacity 5s; } .fade-enter, .fade-leave-to { opacity: 0; } </style> <script> let vm = new Vue({

VUE学习-元素过渡

单元素过渡 appear 初始渲染 通过 appear attribute 设置节点在初始渲染的过渡 appear + css <transition appear appear-class="custom-appear-class"appear-to-class="custom-appear-to-class" (2.1.8+)appear-active-class="custom-appear-active-class" >

Vue3 Transition 过渡效果之切换路由组件

复习作用域插槽 父组件可以给子组件（具有插槽的组件）传递值，并且这个值可以随意使用： MyComponent.vue： <script> import { ref } from 'vue'; let greetingMessage = ref("Hello Vue!"); let num = ref(1); </script> <template> <div class="my-component"

vue 控件的淡入淡出

页面代码。 1.首先要用transition 包裹一下，设置name或者不设置都可以，其次transition 下面要有一个div设置v-if来触发移入移出 <transition name="fade"> <div v-if="show"> 　　　　　　　　淡入淡出 </div> </transition> css代码 2.transition 没有设置n

CSS 过渡

常用的过渡都是使用 CSS 过渡。 下面是一个简单例子： <div id="example-1"> <button @click="show = !show"> Toggle render </button> <transition name="slide-fade"> <p v-if="show">hello</p>

模仿element-ui封装vue组件库（dialog）

封装一个element-ui风格的dialog组件 前置知识： vue过渡动画sync修饰符具名插槽与v-slot指令参数支持： 参数名 参数描述 参数类型 默认值 title 对话框标题 string 提示 width 宽度 string 50% top 与顶部的距离 string 15vh visible 是否显示dialog(支持sync修饰符) b

Arduino学习笔记---Fade 呼吸灯

Arduino学习笔记---Fade 呼吸灯 /* Fade This example shows how to fade an LED on pin 9 using the analogWrite() function. The analogWrite() function uses PWM, so if you want to change the pin you're using, be sure to use another PWM capable pin. O

uni-app pages.json 设置 沉浸式透明导航栏

"pages": [ //pages数组中第一项表示应用启动页, { "path": "pages/main/main", "style": { "navigationBarTitleText": "沉浸式透明导航栏", "navigation

怎么动态改变vue中内置过渡fade-enter-active和fade-leave-active里面的属性值

//这个是vue2内置的过渡，详情看https://cn.vuejs.org/v2/guide/transitions.html // .fade-enter-active, .fade-leave-active { transition: height 0.2s; height: 90px; } 如果我想动态改变height，怎么实现？？？？？？？ 这两个类是进入过渡状态时创建的，在过渡结束后立刻删除  

VUE学习笔记--过渡与动画

Vue 提供了 transition 的封装组件，在下列情形中，可以给任何元素和组件添加进入/ 离开过渡。 条件渲染 (使用 v-if)。 条件展示 (使用 v-show)。 动态组件。 组件根节点。 语法格式如下： <transition name = "nameoftransition"> <div></div> </transition> <!DOCTYPE html> <

vue封装自定义toast

封装自定义toast：   1、新建toast文件夹，文件夹内新建toast.vue和index.js文件：     2、toast.vue代码: <template> <transition name="fade"> <div class="toast" v-show="show" v-html="message"><!-- 使用v-html，展示多样化样

Vue中的简单淡入淡出动画

使用的场景: 刚进入页面.数据还没有显示,图片也没有,可以搭配骨架屏,带有这些动画! Vue2中与Vue3中的动画节点函数名称不同 进入（显示，创建） v-enter 进入前 （vue3.0 v-enter-from） v-enter-active 进入中 v-enter-to 进入后 离开（隐藏，移除） v-leave 离开前 （vue3.0 v-leave-from

2021-08-01

<template> <div class="menu-item" @click="isOpen = !isOpen"> <a href="#"> {{ title }} </a> <svg viewBox="0 0 1030 638" width="10"> <path d="M

vue3 transition 动画变化与示例

1，v-enter -> v-enter-from 2，v-leave -> v-leave-from 相对应的就是 v-enter-from + v-enter-to -> v-enter-active v-leave-from + v-leave-to -> v-leave-active   <template> <div id="demo"> <button @click="show = !show&q

Js 之aos.js页面滚动动画

下载：https://codeload.github.com/michalsnik/aos/zip/master 1、引入 <link rel="stylesheet" href="dist/aos.css" /> <script src="js/jquery.min.js"></script> <script src="dist/aos.js"></script>

linux 基础知识及命令总结

1.mkdir   创建目录 -p 创建多级目录  mkdir -p /data/test -m, --mode=模式 设置权限模式(类似chmod)，而不是rwxrwxrwx 减umask -p, --parents 需要时创建目标目录的上层目录，但即使这些目录已存在也不当作错误处理 [root@wen data]# mkdir test/test{1..3} -p  #创建一个目录

Vue入门笔记Day 8

一.vue中的css动画原理 1.过渡显示 （1）transition标签 transition表示包裹的内容会有一个动画过渡效果，动画效果必须包含在transition标签里。 （2）动画流程 transition包裹后会vue会自动分析css样式，构建一个动画流程。 <!DOCTYPE html> <html> <head> <meta charset="utf-8">

vue 组件transition

    <style> .fade-enter-active, .fade-leave-active { transition: opacity .5s; } .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ { opacity: 0; } </style> <div id="demo"> <button v-on:click=&qu

FFmpeg动效实践与探索（文字方框的同步展开及收缩）

当你看到这样的动图时，你会想到这是用FFmpeg做出来的吗？ FFmpeg，作为一款强大的视频编辑处理工具，在基础的视频处理上十分可靠，在音视频编解码上大放异彩，那么它在动态效果上的应用怎么样呢，笔者为此做了一定的实践，踩了不少坑，现将FFmpeg文字方框动效实现的工作总结如下。 下文将按

Vue 动画 过度效果（渐隐渐现）

首先一个toggle 效果： <div id="root"> <div v-if="show">hello world</div> <button @click="handleClick">切换</button> </div> <script> var vm = new Vue({ el: "#root", data

带有Python的音频处理

由于博客播放不了音频，所以音频将以视频形式展现。公众号也正在进行抽书和红包 音频素材请点击这里进行观看 往下拉就是文章地址 有时，在进行编程时，我们需要进行一些音频处理。编程中最常用的音频处理任务包括–加载和保存音频文件，将音频文件拆分和追加到片段，使用不同的数据

带有Python的音频处理（附带源码）

由于博客播放不了音频，所以音频将以视频形式展现。公众号也正在进行抽书 音频素材请点击这里进行观看 往下拉就是文章地址 有时，在进行编程时，我们需要进行一些音频处理。编程中最常用的音频处理任务包括–加载和保存音频文件，将音频文件拆分和追加到片段，使用不同的数据创建混合音频

Vue中CSS动画原理

Vue 提供了 transition 的封装组件，transition标签意思它包裹的内容里面有一个过渡的动画效果，在下列情形中，可以给任何元素和组件添加进入/离开过渡 条件渲染 (使用 v-if) 条件展示 (使用 v-show) 动态组件 组件根节点   当一个元素被transition包裹了之后，vue会自动分析元素

15VUE动画-1

<html> <head> <meta charset="utf-8" /> <title></title> <script src="js/vue.js" type="text/javascript" charset="utf-8"></script> <style

Swiper.js使用遇到的问题总结

问题一：onSlideChangeEnd回调偶尔不触发 使用 fade 过渡方法，onSlideChangeEnd 回调偶尔触发，偶尔不触发。 因此使用 onTransitionEnd(过渡效果结束之后触发)； var mySwiper = new Swiper('.swiper-container',{ effect: 'fade', onTransitionEnd: function (swiper) { consol