天道酬勤,学无止境

transition

Text transition/animation onclick in javascript function and HTML

问题 我有一个按钮在点击时触发此功能: <button onclick="showAdvice()">Advice!</button> <p id="text"></p> <script> function showAdvice() { var advices = ["1","2","3"]; var choose = Math.floor(Math.random() * advices.length); document.getElementById("text").innerHTML = advices[choose]; } </script> onclick动作在“文本”段落中生成建议,它们以随机顺序出现。 我希望它们之间有一个过渡 - 不透明度,淡出/淡入。我怎样才能在 CSS/JavaScript 中实现这一点? 回答1 回答2 您可以使用 jquery 创建动画。 function showAdvice() { $("#text").hide(); var advices = ["1", "2", "3"]; var choose = Math.floor(Math.random() * advices.length); document.getElementById("text").innerHTML = advices[choose]; $("#text")

2022-07-11 09:47:51    分类:技术分享    javascript   html   animation   text   transition

Vue 2 Transition not working

问题 <template> <div> <transition name="fade"> <message v-show="showMessage" class="tr pop-up-message"> <p slot="header">This is Header</p> <span slot="body">This is Body</span> </message> </transition> <div v-if="!showMessage" class="block" @click.prevent="showMessage = true"> <a class="button is-primary">Primary</a> </div> <div v-else-if="showMessage" class="block" @click.prevent="showMessage = false"> <a class="button is-primary">Primary</a> </div> </div> </template> <script> import message from './Message.vue' export default { components:{ 'message': message, }, data(){ return{ showMessage

2022-05-16 08:03:03    分类:技术分享    vue.js   transition   vuejs2

D3js highlight bar one by one continuously

问题 这是示例小提琴 下面的代码是创建栏 svg.selectAll("rect") .data(dataset, key) .enter() .append("rect") .attr("x", function(d, i) { return xScale(i); }) .attr("y", function(d) { return h - yScale(d.value); }) .attr("width", xScale.rangeBand()) .attr("height", function(d) { return yScale(d.value); }) .attr("fill", function(d) { return "blue"; }) //Tooltip .on("mouseover", function(d) { d3.select(this).style("fill","red"); }) .on("mouseout", function() { d3.select(this).style("fill","blue"); }) ; 在鼠标悬停栏上变为红色,在鼠标悬停时返回蓝色, 我希望它连续不断地获得红色,意味着第一个条红色,然后第二个条,然后第三个,向前移动后,前一个条应该恢复其原始颜色,一次只有一个红色条。 它应该就像当它到达终点时,它应该再次从头开始

2022-05-13 13:58:09    分类:技术分享    javascript   d3.js   transition   bar-chart

Can I change the Android startActivity() transition animation?

问题 回答1 从 API 级别 5 开始,您可以立即调用 overridePendingTransition 来指定显式过渡动画: startActivity(); overridePendingTransition(R.anim.hold, R.anim.fade_in); 或者 finish(); overridePendingTransition(R.anim.hold, R.anim.fade_out); 回答2 在 android 上查看主题:http://developer.android.com/guide/topics/ui/themes.html。 在themes.xml 下应该有android:windowAnimationStyle ,您可以在其中看到styles.xml 中的样式声明。 示例实现: <style name="AppTheme" parent="..."> ... <item name="android:windowAnimationStyle">@style/WindowAnimationStyle</item> </style> <style name="WindowAnimationStyle"> <item name="android:windowEnterAnimation">@android:anim/fade_in</item>

2022-05-12 21:00:07    分类:技术分享    android   animation   fade   transition

Trigger transition on child element, when hovering parent

问题 我有一个菜单,我想使用 css3 对其进行动画处理。 当您悬停主菜单时,我想在子菜单中滑动。 但是我不知道在哪里放置transition属性,使其双向动画。 这是它正常工作的示例,但仅在悬停时。 http://jsfiddle.net/34kcamjv/ 但它只是在我结束悬停时突然关闭,而不是向上滑动。 我尝试将transition放在#sub元素上,但没有任何反应。 这是CSS: #main { position: relative; height: 110px; width: 100%; background-color: red; } #sub { position: relative; height: 100px; width: 100%; background-color: green; margin-top: -100px; z-index: -10; //If transition is put here, nothing happens } #menu:hover > #sub { margin-top: 0; transition: margin-top 0.5s ease; } 和 HTML: <nav> <div id="menu"> <div id="main">MAINMENU</div> <div id="sub">SUBMENU</div> <

2022-05-10 07:29:08    分类:技术分享    html   css   transition

ease in transition of submenu

问题 我正在为我的 WordPress 博客使用 24 个主题。 这是一个仍在开发中的旅游博客……不过,别介意内容。 无论如何,我在主菜单上有一个子菜单。 该网站是:http://www.journeywithandrew.com/ 因此,如果您滚动菜单上的“世界遗产:评论和信息”,您将看到一个包含两个项目的子菜单:“地图视图”和“列表视图” 我的问题是:我在主菜单上使用 css 缓动背景效果,当您将鼠标悬停在菜单项上时可以看到。 然而,子菜单并没有缓和 - 它只是出现。 我希望子菜单也可以缓和以匹配主菜单的转换时间(0.3 秒) 有任何想法吗? 我尝试使用 chrome 的开发工具将 CSS 代码插入到位置,但没有任何效果。 谢谢! 代码: a { -o-transition:color .3s ease-out, background .3s ease-in, border .3s ease-in-out; -ms-transition:color .3s ease-out, background .3s ease-in, border .3s ease-in-out; -moz-transition:color .3s ease-out, background .3s ease-in, border .3s ease-in-out; -webkit-transition

2022-05-07 15:57:23    分类:技术分享    css   transition

CSS transition going backwards/reverse

问题 我想知道是否有任何方法可以使用相同的 CSS 过渡实例来将其向前移动然后向后/向后移动。 例如,假设我有这个过渡: @-webkit-keyframes fade-transition { from { opacity: 0; } to { opacity: 1; } } 以及这次过渡的两名跑步者。 一个淡入,另一个淡出: .fade-in { -webkit-animation: fade-transition .2s linear backwards; } .fade-out { -webkit-animation: fade-transition .2s linear forwards; } 我想要完成的是使用相同的过渡来进行淡入和淡出,但我这样做的方式不起作用。 这是 JSBin 上的示例。 回答1 使用percentage而不是from和to @-webkit-keyframes fade-transition { 0%, 100% { opacity: 0; } 50% { opacity: 1; } } 您可以迭代此次数,也可以将其设置为无限

2022-05-05 01:38:03    分类:技术分享    css   animation   transition

How to animate :before selector with jQuery

问题 var pilot = $('#remote_control'), pilot_shadow = $('#remote_control:before'); pilot.on({ mouseenter: function(){ pilot_shadow.animate({ opacity: 0 }); } }); 回答1 如果您使用 http://jquery.lukelutman.com/plugins/pseudo/jquery.pseudo.js 当你这样做时,它将起作用: pilot_shadow = $('#remote_control:before');

2022-05-04 18:40:17    分类:技术分享    jquery   css   animation   transition   pseudo-element

Is there an R package to calculate 1st order transition matrix from a frequency table?

I have a frequency table aggregated from 800 millions of records and am wondering if I can use a package to calculate 1st order transition matrix from the frequency table, which is not symmetric because some state just never happened again. A sample of the frequency table is: library(data.table) model.data <- data.table(state1 = c(3, 1, 2, 3), state2 = c(1, 2, 1, 2), Freq = c(1,2,3,4)) model.data looks like this: state1 state2 n 3 1 1 1 2 2 2 1 3 3 2 4 Using the package pollster, I can compute the proportion table: library(pollster) crosstab(model.data, state1, state2, Freq) state1 1 2 n 1 0

2022-05-03 05:13:23    分类:问答    r   matrix   transition   chain   markov

How to delegate listening to entering states of a `transitions` state machine?

I am trying to use the transitions library. This question follows this one, quite loosely. I would like to delegate listening to on_enter events to all states and create several such listeners that can subscribe and be notified when entering a state. In my case, I want to notify an external event system to subscribe to a different configuration of events depending on the state. For this example I will use a state machine (say solid<->fluid<->gas with events [heat, cool]). This can be done quite easily using the library like so from transitions import Machine from transitions import EventData

2022-05-02 17:14:55    分类:问答    python   events   transition   state-machine   pytransitions