I have an icon tag in html as:
<clr-icon
[attr.shape]="open ? (iconOpen ? iconOpen : 'caret up') : (iconClose ? iconClose : 'caret down')"
></clr-icon>
I tried applying a transition in CSS like this:
clr-icon {
transition: all 2s ease-in-out;
}
But it doesn't animate.
By writing:
<clr-icon [attr.shape]="open ? 'caret up' : 'caret down'"></clr-icon>
you're not binding to the direction, you're binding to the shape itself. This means whenever Angular updates that binding, it'll force the icon to re-render a brand new shape.
What you want is simply to bind the direction, and keep the shape constant:
<clr-icon shape="caret" [attr.dir]="open ? 'up' : 'down'"></clr-icon>
You can see it working fine here: https://stackblitz.com/edit/clarity-animate-icon?file=src/app/app.component.html
Related
So I have like a hamburger nav bar icon, when clicked the icon changes from a hamburger to a minus. The state logic is just a setState function placed in the NavToggle component (button) like this.
<NavToggle onClick={() => setToggle(!toggle)}><Icon icon={toggle ? faBars : faMinus}></Icon></NavToggle>
And the icon changes in the icon component inside. I cant think of a simple way to fade in between these two. I dont like how snappy the change between them is so I'd really like to implement a slower transition.
I think you just have to create a class and add it to your icon component.
//CSS
.nameOfClass{
transition: all 0.5s ease-in-out
}
//JS
<Icon icon={toggle ? faBars : faMinus} className="nameOfClass"/>
I have :
auto btnBox = new QDialogButtonBox(QFlags({QDialogButtonBox::Abort, QDialogButtonBox::Ok}));
layout()->addWidget(btnBox);
I tried
btnBox->setStyleSheet("QPushButton {background-color : red;}");
But the buttons remains light gray...
Thanks for your help
The following shorter version changes the Background-Color of the Buttons:
auto btnBox = new QDialogButtonBox( QDialogButtonBox::Abort| QDialogButtonBox::Ok );
layout()->addWidget(btnBox);
btnBox->setStyleSheet("background: red");
#SteveXP solution works, if you don't use QWindowsVistaStyle, which uses native drawing
I've got a vue.js application in which I'm trying to figure out how to reverse a delayed css transition. I have a div whose width contracts when the user clicks the close button. Then the height contracts. The height has the delay on it because I want to wait for the width to contract before contracting the height.
BEFORE:
AFTER:
When the user clicks the question mark icon, I want the reverse to happen. The height should expand immediately and then the width expands after a delay.
All the examples of how to do this which I find on google deal with hover transitions. They say to put the reverse transitions in the hover class. All demos I've seen work. But there must be something different about how this works when it comes to transitions that are trigger by something other than hover. In my case, the trigger is a mouse click. And the online solutions don't work. What happens instead is that the reverse transition placed in transitioned-to class seems to override the original transition--which means the original transition contracts the height first (which looks terrible considering the content doesn't fit) then the width.
Here is my code:
.need-help-container {
position: absolute;
right: 0;
height: 120px;
...
transition: right .5s, height .5s .5s;
}
.need-help-container-closed {
right: -360px;
height: 50px;
transition: right .5s .5s, height .5s; // <-- doesn't work
}
<!-- need help box -->
<div class="need-help-container" :class="{'need-help-container-closed': needHelpClosed}">
...
<!-- close button -->
<div ...>
<v-icon #click="needHelpClosed = true" ...>close</v-icon>
</div>
</div>
Should the same solution to the examples involving hover work here? If so, why would it not be working for me? If no, what would be an alternate solution for my case?
Thanks.
Try this:
.need-help-container-closed:active{
//your code here
}
Use :active in place of hover.Did it work?
I figured out a solution. I created a separate class just for reversing the order of the delay:
.need-help-container-opening {
trnasition: right .5s .5s, height .5s;
}
Then I added the class based on a new variable:
<div class="need-help-container"
:class="{'need-help-container-closed': needHelpClosed, 'need-help-container-opening': needHelpOpening}"
#transitionend="needHelpOpening = false">
<div class="faq-icon-container need-help-item"
:class="{'faq-icon-container-closed': needHelpClosed}"
#click="needHelpOpening = true; needHelpClosed = false">
// Question Mark icon... click to open
</div>
...
</div>
So I have a variable called needHelpOpening which I set to true when the user clicks the question mark to open the box. When this variable is true, the box gets the need-help-container-opening class which reverses the delay. Finally, when the transition ends, the transitionend event fires and I catch it in the main div for the box and set needHelpOpening to false so that the original delay order is reset.
Here is what you need to do in order to have a clear view of what I want
Go on this editor
create a shape
select it
rotate it
place your mouse on one of the resize control point then click
you'll see the cursor rotated with the angle of the shape.
I can't find any CSS properties to achieve this kind of thing, how could this be done?
You can't and it doesn't. It just displays the different resize icons. See for example: http://css-cursor.techstream.org/
I needed a rotating arrow cursor for a carousel. Here's what I came up with:
https://codepen.io/addison912/pen/MWwmpoz
Start by hiding the default cursor in css:
body * {
cursor: none;
}
add the image of the cursor you'd like to use to html:
<div id="cursor">
<img alt="Cursor Arrow" src="https://upload.wikimedia.org/wikipedia/commons/9/9d/Arrow-down.svg"/>
</div>
This image needs to track cursor position:
let currentCursorPos;
let cursorEl = document.querySelector("#cursor");
window.addEventListener("mousemove", event => {
currentCursorPos = { x: event.clientX, y: event.clientY };
cursorEl.style.transform = `translate(${currentCursorPos.x}px, ${currentCursorPos.y}px)`;
})
Now you can rotate the #cursor img as needed.
Yes, in modern browsers (Chrome, Firefox, Safari) you can use an SVG encoded as a data URI as the CSS cursor:
cursor: url("data:image/svg+xml, ... ") 16 16, auto;
Encoding the SVG can be tricky, but is well documented here:
https://codepen.io/tigt/post/optimizing-svgs-in-data-uris
The trick is then modifying the encoded SVG's transform property on the fly:
<svg viewBox="32 32"><g transform="rotate(45, 16, 16)">...</g></svg>
For instance, in the above example you'd swap out 45 for your desired angle.
I've set up a function:
function removeDiv(el){
var elem = document.getElementById(el);
elem.style.transition = "display 2.5s linear 0s";
elem.style.display = "none";
}
and created a div which has the function called onclick.
However when I click on the div it disappears immediately without transitioning. Are display transitions not supported - can it be either one state like 'block' or another?
Thanks for looking!
display is not a property that can be animated. Try opacity instead.
For future reference, here is the official specification of all properties that can be animated: http://www.w3.org/TR/css3-transitions/#animatable-css