css-transitions

问题 I have a requirement in which the container is stretching all over the page. when I click on the container, it should become smaller. This should happen with animation. I tried css transition which is animating the stretched element to top: shrinking slowly to the provided dimensions while moving towards top-right but what I want is Shrink in middle and then move to bottom-right of the page by animating. Fiddle CSS #main { position: fixed; height: 100%; width: 100%; margin-top: 50px;

问题 I have a jQuery plugin that moves an element on the screen, but has an "animate" toggle to show a slide transition or not. In attempting to use CSS Transitions rather than Javascript transitions for the change, I ran across this, and I'm not sure if it's a bug/quirk, or I'm just doing it wrong: var $item = $('#myItem'); if (!animate) { $item.removeClass('csstransitions'); // Class that has "transition:left 0.25s ease-out" $('#myItem').css('left', '300px'); // Move the element $('#myItem')

问题 So far in my research the only css3 transition event I've found is transitionEnd. What I would like to do is bind a javascript function to an element to be constantly re-fired while a transition is occurring. Think $(window).resize but for an element being resized with a css3 transition. Is this possible? I have found no transitionStart, transitionAnimation or anything else that would allow me to detect, the start of, or the time when, a transition is occurring. I would prefer jQuery's

问题 if i apply a style to an element and immdiatily afterwards add css transition styles, the transition is applied to the style preceeding. this might not always be the intention. i found a solution by using settimeout (0), is there any cleaner/more correct approach known ? http://jsfiddle.net/nicib83/XP9E7/ $("div").css("opacity", 1); $("div").css("-webkit-transition", "all 0.35s"); /* Works window.setTimeout(function () { $("div").css("-webkit-transition", "all 0.35s"); }, 0); */ best regards

问题 In the link: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transitions it is said that: Note: The transitionend event doesn't fire if the transition is aborted because the animating property's value is changed before the transition is completed. So I went ahead and tried it on http://jsfiddle.net/HA8s2/32/ and http://jsfiddle.net/HA8s2/33/ using Chrome and Firefox. example: (click on either the left or right box in jsfiddle) $(".foo").click(function(evt) { $(".foo")

问题 I have a box with two separate css transistions that occur at the same time. When the transitions occur the heading and paragraph text underneath the icon moves position See JS Fiddle: http://jsfiddle.net/Lsnbpt8r/ Heres my html <div class="row"> <div class="col-md-4 text-center transistion"> <div class="box"> <i class="circle-pos circle glyphicon glyphicon-home icon"></i> <h3 class="heading"> Construction </h3> <p>This is how we do it</p> </div> </div> <div class="col-md-4 text-center

问题 I'm trying to create a offcanvas menu similar to Google Plus app's one. Basically, I have a code working on almost all devices (android/ios) and browsers (ff, chrome, IE8+) The only problem I have is on a Samsung Galaxy Tab 3 running Android 4.1.2 : if I activate the opacity transition of the dark/opaque layer on the right, the offcanvas menu won't hide when closing the menu ... and it totally breaks my app. See this two fiddles on Android 4.1.2 : doesn't work : http://jsfiddle.net/F3BPw/3/

问题 I'm trying to create a offcanvas menu similar to Google Plus app's one. Basically, I have a code working on almost all devices (android/ios) and browsers (ff, chrome, IE8+) The only problem I have is on a Samsung Galaxy Tab 3 running Android 4.1.2 : if I activate the opacity transition of the dark/opaque layer on the right, the offcanvas menu won't hide when closing the menu ... and it totally breaks my app. See this two fiddles on Android 4.1.2 : doesn't work : http://jsfiddle.net/F3BPw/3/

问题 I have a table cell with some text in it. <td>Text in here</td> I can't set the width with CSS because I don't know how much data is in other cells in the same column. However, I'd like to animate the width property in CSS when my Javascript inserts new code into the table. In other words, when the cell becomes this: <td>More Text in here</td> I'd like the width to smoothly transition, preferably with CSS. Since I can't set the width manually, this doesn't seem to work td{ transition: width 0

问题 I have transitions for width and height assigned on several elements on my page, including the top navigation bar and the <main> element. As the user resizes the page, the elements animate to change their width/height etc. This works fine except when navigating to a new page. As the page loads, the elements animate from their maximum assigned width to their standard width. This is not animating from max-width to width but rather something like the following: nav { height: 25px; transition: