transitions

Why this CSS3 transition on height does not work

由 本小妞迷上赌 提交于 2019-12-10 02:50:11
问题 I have been working in an accordion, but for some odd reason the following code: <style> .collapse { position: relative; height: 0; overflow: hidden; -webkit-transition: height .35s ease; -moz-transition: height .35s ease; -o-transition: height .35s ease; transition: height .35s ease; } .collapse.in { height: auto; } </style> <div class="accordion"> <div class="something"> <a class="" >Accordion Pane 1</a> </div> <div class="accordion-body collapse"> <div class="accordion-inner"> content <

What is the standard way to get the active (running) D3 v3 Transition for a given element?

由 女生的网名这么多〃 提交于 2019-12-10 01:54:38
问题 The abstractions of D3 still make my mind bend, so hopefully I'm presenting this correctly. In D3 version 3 , given an element (say a circle), and given only one transition possibly running per element what is the best way to determine what the current running transition on that element is, if there is one at all? I'm aware that I can manually inspect __transition__ on the element (though help there is welcome too), but I'm really hoping for something a little higher-level. My larger goal

JS or Css page slide transition between 2 full pages

由 喜欢而已 提交于 2019-12-09 16:14:26
问题 I have two html pages: Page1.html, Page2.html. I would like to slide between the two pages. I have found a lot of plugins and solutions to slide between two divs or slide within a container but what I need is a complete page change. I found something but the problem is that jquery code on page2 does not fire when the page loads. I could use jQuery mobile but my project uses jQuery ui and it gives me some conflicts... so I need something else. The project is supposed to run on iPad so it would

Owl carousel still transitions when only 1 slide in carousel

由 こ雲淡風輕ζ 提交于 2019-12-08 22:00:54
问题 I wonder if anyone could help with this. I am using carousel in a CMS and would like the ability for the customer to sometimes only have 1 slide if they so wish. However if only 1 slide is there the fade transition still occurs so it basically transitions to itself. Is there any way to stop the carousel transitioning when there is only 1 slide? I am surprised that this is not a built in function as it has been with other carousels I have used. <div id="owl-demo" class="owl-carousel"> <div

webkit-transition height for a div with a dynamic changing height based on content?

由 ぃ、小莉子 提交于 2019-12-08 15:48:45
问题 please see the following jsFiddle http://jsfiddle.net/SgyEW/10/ You can click the various buttons which shows different length content which causes the box to grow/shrink. I want the height change to be animated so it is not so jumpy, I tried this by adding: -webkit-transition: all 1s linear; But that has no effect in this use case. Any ideas in terms of a solution that doesn't require JavaScript? Thanks 回答1: I'm afraid there is no way of animating height with CSS3 transitions without some

Is it possible to combine translateX/translateY and scale in single CSS transition?

由 耗尽温柔 提交于 2019-12-08 05:43:42
问题 I have been playing around with looping of CSS transitions (following this article). The transition itself could be divided into 4 (looped) phases: shrinked2=>expanded=>expanded2=>shrinked These states are represented by 4 classes: shrinked2 - stateOne expanded - stateTwo expanded2 - stateThree shrinked2 - stateFour I am, initially, setting the width and height of my element, being transitioned, in percents via id. Then, to trigger transition, I am changing transform: scale via state classes,

CSS3 Transitions On ios Slow/Not Working

由 馋奶兔 提交于 2019-12-07 11:11:10
问题 I am trying to start using some CSS3 transitions on responsive site I'm making and everything is working perfectly on desktop Chrome, and Chrome on Android but it's not working properly on ios devices for both Chrome and Safari. The CSS snippet I'm using for my menu, for instance, is below: #menu { width: 180px; height: 100%; position: fixed; top: 0; left: -180px; z-index: 9; transition: left 1s; -webkit-transition: left 1s; } I have a menu button that, when clicked, calls a javascript

Android: using Activity's default animation for Fragments

由 女生的网名这么多〃 提交于 2019-12-07 03:59:29
问题 I need to use the Activities default animation in a Fragment replace, but using android.R.anim I can't find it. How can I find the name of it? Is it possible to use it by default, or would I have to create the animation manually in order to use it? Thanks a lot in advance. 回答1: Having searched for this exact issue, I've found this resource on the Google forums (oddly not in Android-Developers): https://groups.google.com/d/topic/android-porting/c75-7TMgn3A/discussion 来源： https://stackoverflow

CSS3 + Javascript - Will -ms-transition:opacity 1s ease-in-out; work in IE 10 alone?

由 僤鯓⒐⒋嵵緔 提交于 2019-12-07 03:27:00
问题 I have been playing around with some CSS3 + JavaScript today. Below you have my code, (was trying to make the world's smallest image fading gallery, don't know if I succeeded). I am not quite sure how to set the CSS though. See comment questions below: -ms-transition:opacity 1s ease-in-out; // Will this allone work in IE 10? transition:opacity 1s ease-in-out; // Why do we set this? Maybe the world's smallest JS-Gallery: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>HB - CSS3 +

Is it possible to combine translateX/translateY and scale in single CSS transition?

由 柔情痞子 提交于 2019-12-06 15:30:50
I have been playing around with looping of CSS transitions (following this article ). The transition itself could be divided into 4 (looped) phases: shrinked2=>expanded=>expanded2=>shrinked These states are represented by 4 classes: shrinked2 - stateOne expanded - stateTwo expanded2 - stateThree shrinked2 - stateFour I am, initially, setting the width and height of my element, being transitioned, in percents via id. Then, to trigger transition, I am changing transform: scale via state classes, listed above. Up to his point it basically works fine for me, here is demonstration on JSFiddle . Now
订阅 transitions