Problem with work transition

Question

I ask to help in amination of dynamically created objects. Objects are created, but the transition property is not applied as needed. Rather, it is applied correctly only if I use a profiler - then there is movement, if without it - the position changes, but without animation - it just jumps.

  .wrp { position: absolute; width: 500px; height: 300px; perspective: 500px; left: 200px; } .D { position: absolute; left: 100px; top: 100px; } </style> <script> function Temp() { $("<div class='D'>text</div>").appendTo(".wrp"); $(".D").css({"transition": "all 2s", "transform": "translate(200px, 200px"}); } </script>

The idea: to create an object in the desired position (100, 100) and smoothly move it to the position (200, 200).

You have a "transform": "translate(200px, 200px" typo. - neluzhin

Vadim Ovchinnikov 8,411 3 26 64 · Answer 1 · 2017-01-02T09:44:36

transition does not work for display: none; and blocks that were not in the stream when loading the document. In this case, you need to use animate . I will not do the task for you, but I will give an example below, which you can use for your project:

 .block { width: 200px; height: 200px; background: #000; } @keyframes bounceInRight { 0%, to { animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 0% { transform: translate3d(0, 0, 0); } to { transform: translate3d(200px, 200px, 0); } } .bounceInRight { animation-name: bounceInRight; animation-duration: .2s; animation-fill-mode: both; }

 <div class="block bounceInRight"> Какой-то важный контент. </div>

VostokSisters VostokSisters 763 four 20 · Answer 2 · 2017-01-04T11:43:21

If this did not work out, then try to create an object, and as soon as it is created, insert a class to it by means of the same js.
And in css, set all the necessary properties for this class, including animation ( transition recommended for such light ideological tasks). As soon as it is inserted, the animation will start.
Embed css-javascript - the last task for the animation. You will find more problems than you solve.

Problem with work transition

2 answers 2

Protected by a community spirit ♦ 2 Jan '17 at 9:50 .

More articles: