transition

vue中可以自定义动画的前缀

由 谁说我不能喝 提交于 2019-11-30 16:59:34
vue中可以自定义动画的前缀 1.只需在中加入name属性即可 <transition name="my"> <h6 v-if="flag2">这是一个H6</h6> </transition> 2.将v-enter,.v-leave-to前的v改成name属性就行 例如 .my-enter, .my-leave-to{ opacity: 0; transform: translateY(80px); } .my-enter-active, .my-leave-active{ transition: all 0.8s ease; } 来源： https://www.cnblogs.com/cssy/p/11605424.html

vue--组件动画效果--淡入淡出--位移

由 你说的曾经没有我的故事 提交于 2019-11-30 16:55:19
<!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

Change activity transition when inside a TabHost

由 爷，独闯天下 提交于 2019-11-30 16:32:27
I have successfully changed the transitions between activities using overridePendingTransition() . Unfortunately when I am on a TabActivity and use activities inside each tab. When one of those activities inside the content of the tab, starts another activity, the overridePendingTransition() seems to not work. I basically have a TabActivity , inside it resides an activity with a ListView . What I'm doing is when the item is clicked, I launch the item details' activity. This new activity's transition animation is not being overridden with the overridePendingTransition() I basically do this:

How do you present a UIViewController from the top of the screen instead of the bottom?

由 被刻印的时光 ゝ 提交于 2019-11-30 16:26:22
问题 I am using a UIViewController and I use presentModalViewController:controllerr animated:YES to present it but I would like if it would slide down from the top of the screen instead of up from the bottom, any way to do this? 回答1: I created a function for pushing the ViewControllers from all 4 directions: - (void) slideLayerInDirection:(NSString *)direction andPush:(UIViewController *)dstVC { CATransition* transition = [CATransition animation]; transition.duration = 0.5; transition

How do you present a UIViewController from the top of the screen instead of the bottom?

由 流过昼夜 提交于 2019-11-30 16:20:34
I am using a UIViewController and I use presentModalViewController:controllerr animated:YES to present it but I would like if it would slide down from the top of the screen instead of up from the bottom, any way to do this? Amarsh I created a function for pushing the ViewControllers from all 4 directions: - (void) slideLayerInDirection:(NSString *)direction andPush:(UIViewController *)dstVC { CATransition* transition = [CATransition animation]; transition.duration = 0.5; transition.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut]; transition.type =

elementUi内置过渡动画（淡入）

由 末鹿安然 提交于 2019-11-30 15:22:41
elementUi 元素淡入的方式有两种： 1.el-fade-in-linear 2.el-fade-in 使用方法： 在要使用该淡入效果的标签外层嵌套<transition>标签，并添加name属性，属性值为el-fade-in-linear 或 el-fade-in 例子： <template> <div> <el-button type="primary" @click="fadeIn()">淡入</el-button> <div class="ctn"> <!-- 在transition标签里添加对应的name --> <!-- 淡入方式1：el-fade-in-linear --> <transition name="el-fade-in-linear"> <div class="box" v-show="show">el-fade-in-linear</div> </transition> <!-- 淡入方式2：el-fade-in --> <transition name="el-fade-in"> <div class="box" v-show="show">el-fade-in</div> </transition> </div> </div> </template> <script> export default { name: "HelloWorld",

Android - Shared Element Transition In Dialog

由 梦想的初衷 提交于 2019-11-30 14:20:44
问题 I wanted to know if there is any way to use shared elements between an activity/fragment and a dialog? I have a project which contains dialogs and I want to make a transition between an ImageView in Activity's view hierarchy to the relevant ImageView in my GalleryDialog. I searched a bit and found this link: Shared element transition with Dialog Activity which describes the workflow for using dialog themed activity. I was wondering if I could do it without using an extra activity and passing

css3 translate in percent

由 心不动则不痛 提交于 2019-11-30 08:59:59
I am stuck on defining an css3 cube completely with percent. Here a short example in Codepen http://codepen.io/anon/pen/detAB As you can see the cube faces have 100% width and height of its parent element, which works perfect. Now i am trying to translate the bottom face 50% down and 50% back. with pixel values this is no problem transform: rotateX(-90deg) translateZ(50px) translateY(50px); but with percent nothing happens transform: rotateX(-90deg) translateZ(50%) translateY(50%); is there any other way? or am I missing something? The percentage there is not of the parent container in the way

Is there any way to have a transition effect when changing the innerHTML?

由 风格不统一 提交于 2019-11-30 08:16:44
问题 I'm trying to add a transition effect when switching between projects. This code currently works, but I'd rather have something like having a fade effect when switching projects. Is this possible? Here is a jsfiddle if that helps at all. Thanks! My code: HTML <body> <div id="proj_name"></div> <div id="proj_description"></div> <img id="proj_img" src=""><br> <button id="proj_switcher">Next Project</button> </body> JavaScript /** * Constructor function for Projects */ function Project(name,

【前端】过渡（transition）

由 ≡放荡痞女 提交于 2019-11-30 06:55:10
过渡（transition） 语法格式: transition: 要过渡的属性 花费时间 运动曲线 何时开始; 如果有多组属性变化，还是用逗号隔开。 属性 描述 CSS transition 简写属性，用于在一个属性中设置四个过渡属性。 3 transition-property 规定应用过渡的 CSS 属性的名称。 3 transition-duration 定义过渡效果花费的时间。默认是 0。 3 transition-timing-function 规定过渡效果的时间曲线。默认是 "ease"。 3 transition-delay 规定过渡效果何时开始。默认是 0。 3 如果想要所有的属性都变化过渡， 写一个all 就可以 transition-duration 花费时间 单位是 秒 s 比如 0.5s 这个s单位必须写 ms 毫秒 运动曲线 默认是 ease 何时开始 默认是 0s 立马开始 举个例子 div { width: 200px; height: 100px; background-color: pink; /* transition: 要过渡的属性 花费时间 运动曲线 何时开始; */ transition: width 0.6s ease 0s, height 0.3s ease-in 1s; /* transtion 过渡的意思 这句话写到div里面而不是
订阅 transition